在 Blogger 中插入代码块并美观地展示代码

方法 1：使用 <pre> 和 <code> 标签

         在 Blogger 的编辑器中切换到 HTML 模式。
         使用以下格式插入代码：
<pre><code> // 示例代码 function sayHello() { console.log("Hello, World!"); } </code></pre>
         保存并预览，代码会以简单的格式显示。

方法 2：自定义 CSS 样式

         进入 Blogger 的主题设置，点击“自定义 HTML”。
         在 <style> 标签中添加以下 CSS 样式：
pre { background-color: #f4f4f4; padding: 10px; border-radius: 5px; overflow-x: auto; } code { font-family: monospace; color: #333; }
         保存后，代码块会有更美观的样式。

方法 3：使用第三方代码高亮工具

         推荐工具：Prism.js 或 Highlight.js。
         将工具的 CSS 和 JavaScript 文件链接到 Blogger 的 HTML 中：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
         在代码块中添加语言标识，例如：
<pre><code class="language-javascript"> function sayHello() { console.log("Hello, World!"); } </code></pre>
         保存后，代码会自动高亮显示。
         通过以上方法，你可以根据需求选择适合的方式，让代码块在 Blogger 中更清晰、美观地展示！