如何在blogger文章中添加高亮代码

日期：

 在 Blogger 中，您可以通过修改 HTML 来添加自定义 CSS。以下是如何操作的步骤：


  1. 登录到 Blogger，然后进入你想要修改的博客。

  2. 点击左侧菜单中的 “主题”。

  3. 在主题页面，点击 “自定义” 按钮旁边的 “编辑 HTML”，进入 HTML 编辑器。

  4. 在 HTML 编辑器中，找到 <head> 标签。这通常是在文件的开头部分。

  5. 在 <head> 标签内，找到或添加 <style> 标签。如果没有 <style> 标签，你可以在 <head> 标签内插入以下代码：

<style>
/* 样式代码框 */
pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 10px;
    border-radius: 5px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: monospace;
    overflow-x: auto;
    position: relative;
}
</style>
以上设置好后，我们在遇到写代码时可以改成html编写格式，然后按以下示例，注意里边内容是随意写的，需要自己去更换。
<pre><code class="language-powershell">
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
irm get.scoop.sh | iex
scoop install git
</code></pre>

为了防止内容进入代码区，在html模式下，代码最后边请加上<br>，用来空行进入内容编辑区。

以上是简单的代码使用，如果你想要带颜色的语法高亮，建议使用Prism.js插件。对大部分UP主来说，不是非常必要，在这里我就不再多讲。

评论

发表评论