WordPress实现类RStudio风格R语法高亮：插件或自定义方法咨询

我来帮你解决这个问题——要在WordPress里实现和RStudio一致的R语法高亮，确实有几个靠谱的方案，不管是找适配的插件还是自定义配色都可行：

• Code Syntax Block：这是WordPress官方团队维护的插件，原生支持代码块语法高亮，而且完全可以自定义样式来匹配RStudio。安装启用后，写文章时用代码块工具选择R语言，之后只需要添加自定义CSS就能调整成RStudio的风格。它的优势是轻量、兼容性好，不会拖慢站点。
• Prism Syntax Highlighter：这个插件社区很活跃，自带不少预设主题，你可以找找有没有接近RStudio的，要是没有也能轻松自定义CSS。它支持多种语言，R当然不在话下，而且配置选项很灵活，比如是否显示行号、是否添加复制按钮等。

不管用上面哪个插件，或者你想继续用现有的wp-syntax-plugin，核心都是写出匹配RStudio默认样式的CSS规则。下面是RStudio默认高亮的核心配色，你可以把这段代码添加到WordPress的「外观 -> 自定义 -> 额外CSS」里：

/* RStudio风格的R代码高亮 */
/* 针对Code Syntax Block的样式 */
.wp-block-code code.language-r {
  background-color: #f7f7f7;
  color: #000000;
  padding: 1em;
  border-radius: 4px;
}
.wp-block-code code.language-r .token.keyword {
  color: #7F0055;
  font-weight: bold;
}
.wp-block-code code.language-r .token.string {
  color: #2A00FF;
}
.wp-block-code code.language-r .token.comment {
  color: #666666;
  font-style: italic;
}
.wp-block-code code.language-r .token.function {
  color: #0000FF;
}
.wp-block-code code.language-r .token.variable {
  color: #000000;
}
.wp-block-code code.language-r .token.number {
  color: #1A01CC;
}

/* 如果用wp-syntax-plugin，替换成下面的选择器 */
.wp_syntax pre.r {
  background-color: #f7f7f7 !important;
  color: #000000 !important;
  border: none !important;
}
.wp_syntax pre.r .kw {
  color: #7F0055 !important;
  font-weight: bold !important;
}
.wp_syntax pre.r .st {
  color: #2A00FF !important;
}
.wp_syntax pre.r .co {
  color: #666666 !important;
  font-style: italic !important;
}
.wp_syntax pre.r .fu {
  color: #0000FF !important;
}

添加之后，刷新你的博客页面，R代码块就会变成和RStudio几乎一致的样式了。如果有细节需要调整（比如行号样式、边框），可以再修改CSS里的属性。

• 如果你用Prism插件，也可以直接在插件设置里找到「自定义CSS」选项，把上面的规则适配成Prism的选择器（比如把.wp-block-code code.language-r换成.language-r）。
• 测试的时候可以写一段包含关键字、字符串、注释、函数的R代码，比如：

# 这是一段测试代码
library(tidyverse)
data <- mtcars %>%
  filter(mpg > 20) %>%
  select(mpg, cyl, hp)
print(data)

看看高亮效果是不是和RStudio里的一致，再微调颜色或者样式。

内容的提问来源于stack exchange，提问作者Joachim Schork