在 blogger 上插入代码

总是会有插入代码的需求嘛，但是这个 blogger 没有提供插入代码的功能就弄的很是麻烦。上网找了一些教程，但是大多很麻烦，需要切换到 html 视图什么的，这就搞得很不方便了。

所以我自己折腾了一下，弄了一个应该比较方便的，插入代码的方法。

需要做的工作

简单来说，打开“布局”，添加一个 “HTML/JavaScript小工具”，虽然直接修改模板来增加 js 和 css 也是可以的，但是毕竟要麻烦不少。

添加的小工具放到哪里都是可以的，反正都能加载。

插入的内容是

<style type="text/css">
    pre.highlight {
    font-size: small;
    font-family: sans-serif;
    letter-spacing: .015em;
    line-height: 130%;
    overflow-x: auto;
    overflow-y: auto;
    background-color: #f6f8fa;
    padding: .5em;
    display: block;
    color: #24292e;
}
code,kbd,pre,samp {
    font-size: small;
    font-family: sans-serif;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>
    if ($("blockquote").length > 0) {
        for (let index = 0; index < $("blockquote").length; index++) {
        let temp = $($("blockquote").get(index)).children("div")
        $($("blockquote").get(index)).after($("<pre class=\"highlight\"></pre>").html($("<code></code>").html(temp)))
    }
    $(".highlight").find("span").removeAttr("style")
    $("blockquote").remove()
}
</script>

填进去保存就行了

使用

就是为了追求简单，才弄的这些东西的，所以使用起来应该比较简单。

首先在编辑器中，选择“正常”

然后粘贴代码，最好是 ctrl+shift+v 粘贴为纯文本。

然后用鼠标选择这段代码，点击引用，然后代码就插入成功了。

确实这样导致引用无法使用了，但是把引用和插入代码共用一个样式大概也没什么问题吧。

xmdhs