blogger添加高亮代码以及工具栏引用代码按钮

置顶 moran69

已于 2025-02-23 10:35:10 修改

阅读量1.2k

点赞数 20

文章标签： javascript 开发语言 ecmascript

于 2025-02-23 10:32:39 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40927107/article/details/145806137

版权

一、在背景自定义html添加高亮代码

效果展示在这里插入图片描述

在`<head>`之后插入

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>
    <link href='https://cdn.jsdelivr.net/gh/google/code-prettify@master/styles/sunburst.css' rel='stylesheet'/>

    <style>
.copy-code-button {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  font-size: 12px;
  margin: 5px 0 0;
  padding: 3px 8px;
  position: absolute;
  right: 10px;
  top: 10px;
}
.copy-code-button:hover {
  background-color: #ddd;
}
.prettyprint {
  position: relative;
  padding: 20px 10px 10px;
}</style>

在`</body>`之前插入

 <script>

document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
  var copyButtons = document.querySelectorAll(&#39;.prettyprint .copy-code-button&#39;);
  copyButtons.forEach(function(button) {
    button.addEventListener(&#39;click&#39;, function() {
      var codeBlock = this.parentNode.querySelector(&#39;code&#39;);

      var codeText = codeBlock.textContent;

      var textarea = document.createElement(&#39;textarea&#39;);
      textarea.value = codeText;
      textarea.setAttribute(&#39;readonly&#39;, &#39;&#39;);
      textarea.style.position = &#39;absolute&#39;;
      textarea.style.left = &#39;-9999px&#39;;
      document.body.appendChild(textarea);

      textarea.select();
      document.execCommand(&#39;copy&#39;);

      document.body.removeChild(textarea);

      var originalText = this.textContent;
      this.textContent = &#39;已复制!&#39;;

      setTimeout(function() {
        button.textContent = originalText;
      }, 2000);
    });
  });
});

    </script>

此处具有油猴脚本：一键插入高亮代码

在这里插入图片描述

使用方法

在博客编辑时如下使用

<pre class="prettyprint lang-python">
<code>
// 在这里粘贴您的代码
console.log("Hello World!");
</code>
<button class="copy-code-button">复制</button>
</pre>

二、在博客编辑栏插入引用代码按钮

在这里插入图片描述

油猴脚本地址：https://greasyfork.org/zh-CN/scripts/527796-blogger-code-block-inserter

blogger添加高亮代码 以及 工具栏引用代码按钮

一、在背景自定义html添加高亮代码

在<head>之后插入

在</body>之前插入

使用方法

二、在博客编辑栏插入引用代码按钮

blogger添加高亮代码以及工具栏引用代码按钮

在`<head>`之后插入

在`</body>`之前插入