众所周知，wordPress自带的代码区块不是很好看，并且对于代码的展示也不是很好。

比如：换行符、变量颜色等等。

所以今天就给大家推荐一款“代码展示”插件：Code Block Pro

这是一款由vsCode引擎驱动的代码高亮插件，非常适合展示代码。但是和原生的主题样式xue微有那么一点点小冲突。

不过别担心，我会把兼容样式的代码放到最后，一键粘贴即可。

1、插件

我们直接到插件–安装新插件中，检索Code Block Pro，安装并启动。这个时候文章区块里就会多出现一个Code Pro的选项。

看到这个新的Code Pro说明插件安装成功了。但是！别急，现在的样式是有兼容性问题的，下面我就来调整一下样式。

2、样式代

首先我们找到：外观–自定义–额外CSS，然后把下面的代码粘贴进去

这里主要是对原生样式的内边距做一下调整

/*代码区块样式*/
.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre{
	padding:40px 0 16px 16px !important
}

				

					
				
				

					
				
				

					
				
				

					
				
			

然后，我们在Code Pro中把区块的“标题类型”选择“无”

这样就避免了插件提供的代码块和原生代码块之间的样式兼容问题了。

看一下效果：

代码块的主题也可以自己选择，我目前使用的是Solarized Dark主题

快来试试代码块版的“奇迹暖暖”吧~