如何在SquareSpace博客教程中实现类似StackOverflow的代码块展示？

兄弟，我刚好折腾过Squarespace的代码高亮，给你几个靠谱的方案，能实现类似StackOverflow的缩进和着色效果：

方案一：用Prism.js（最推荐，效果接近StackOverflow） #

Prism是轻量且常用的语法高亮库，步骤很简单：

1. 注入Prism的CSS和JS
   打开Squarespace后台，进入「设置」→「高级」→「代码注入」：

   • 在「页眉」里粘贴Prism的主题CSS（比如默认主题）：

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css">
     

   • 在「页脚」里粘贴Prism的核心JS+你需要的语言支持（比如HTML、JS、CSS）：

     <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-html.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-css.min.js"></script>
     

   （注：可以去Prism官网选更贴合你喜好的主题，比如Dracula、Tomorrow Night）

2. 在文章里插入代码
   写文章时，切换到「代码块」或者用「HTML块」，把你的代码用<pre><code class="language-xxx">包裹，记得转义HTML标签（比如把<改成<）：
   示例（HTML代码）：

   <pre><code class="language-html">&lt;div class="blog-post"&gt;
     &lt;h1&gt;我的教程&lt;/h1&gt;
     &lt;p&gt;这是一段示例代码&lt;/p&gt;
   &lt;/div&gt;</code></pre>
   这样Prism会自动给代码着色，同时保留你写的缩进，效果和StackOverflow几乎一致。
   
   

方案二：用Highlight.js（备选，同样好用） #

和Prism逻辑差不多，只是库不同：

1. 同样在「代码注入」的页眉加CSS：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/styles/github.min.css">
   

2. 页脚加JS：

   <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/lib/common.min.js"></script>
   <script>hljs.highlightAll();</script>
   

3. 文章里的代码用<pre><code class="language-xxx">包裹就行，Highlight.js会自动识别并着色。

方案三：自定义CSS美化（不用外部库） #

如果你不想加载外部库，也可以自己写CSS来优化代码块的样式，虽然没有语法着色，但能搞定缩进和基础美化：
在「代码注入」的页眉加CSS：

pre {
  background-color: #f6f8fa;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
}
code {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  tab-size: 2; /* 控制缩进大小 */
}

然后文章里用<pre><code>包裹代码，就能得到带缩进、灰色背景的代码块，但没有语法着色。

注意事项 #

• 不要同时加载Prism和Highlight.js，会导致样式冲突；
• 选CDN链接时尽量选稳定的版本，避免后续失效；
• 写代码时记得转义HTML标签，不然会被Squarespace解析成页面元素。

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