xmdhs's blog

在 blogger 上插入代码

xmdhs

总是会有插入代码的需求嘛,但是这个 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