Jupyter中<code>标签内代码能否实现类似三重反引号代码块的语法高亮

在Jupyter环境中完全可以为HTML <code>...</code>标签实现与Markdown原生三重反引号代码块效果相近的语法高亮，且支持你需要的CSS自定义样式能力。

具体实现方法 #

• 基础高亮配置
  Jupyter内置的语法高亮引擎支持识别<code>标签的语言类名，只需将<code>标签嵌套在<pre>标签内（用于保留代码缩进、换行格式），并给<code>添加language-xxx类名指定代码语言即可，示例如下：

  <pre>
    <code class="language-python">
  

def count_sum(n):
res = 0
for i in range(n+1):
res += i
return res
print(count_sum(10))


上述代码渲染后效果和```python开头的原生Markdown代码块完全一致。

• 自定义样式设置
  你可以直接给<pre>或<code>标签添加style属性自定义视觉效果，也可以在Jupyter全局自定义CSS中添加对应规则，实现自定义背景色、字体、圆角、阴影等效果，示例如下：

  <pre style="border-radius: 6px; background: #282c34; padding: 15px; margin: 10px 0;">
    <code class="language-java" style="color: #abb2bf; font-family: 'Consolas', monospace; font-size: 14px;">
  

public class Test {
public static void main(String[] args) {
System.out.println("Custom style test");
}
}


这种方式的样式优先级高于Jupyter默认主题，不会随主题切换失效。

注意事项 #

• 代码内容如果包含<、>、&等HTML特殊字符，需要提前转义为<、>、&，避免被浏览器解析为HTML标签导致渲染错误
• 部分Jupyter版本支持给<pre>标签添加class="numberLines"实现行号显示，可根据自身使用版本测试
• 如果是Jupyter Lab环境，部分第三方主题可能会覆盖默认高亮规则，给标签加内联style属性可规避该问题

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