highlight.js 可以自动识别 pre code 进行代码美化

你可以这样使用 ``` <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css' rel='stylesheet'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/> <script>hljs.initHighlightingOnLoad();</script> ``` ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijsybcwxr28P7nive0JTFZkjq-40Vx5yx6CWBAhQV-jFgk7auRaZiwf4ijFS2Z7brrKOKa8sNQUH5Rut1ItkyY4F_utkIE7MeOOhCKTd3zp3t4jHLVIh-fmrqc-PjVdyBC7LuHUabRl4_aiWUEpJYMnnrrWNmPtQ0cQkX-Cy5TgxUL0ngXdVtxCAeLhNKE/s1600/chrome_2024-10-02_14-27-24.png)

评论

发表评论

此博客中的热门博文

本文内容为 markdown 文本

本页面的实践操作过程请见 https://zelikk.blogspot.com/2024/10/blogger-markdown.html 以下为演示内容 --- 放到了 Github https://github.com/crazypeace/blogger-replace-markdown-text-html 你可以这样使用 ``` <script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'/> <script src='https://crazypeace.github.io/blogger-replace-markdown-text-html/blogger-replace-markdown-text-html.js'/> ``` ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiaUgCF4QPis0_blyO8MdHD1niI6wbUTtB6qcNjBXbmSRdJg05UeR3I5rO5NOk0-E9SU1JOYUSDpZy42-c1hAAYagUeoi9rLccH9e8YRdKmAR8DhOamDd2ysSVkCWx3EgE0HuJs0_RpicZ73wSbWhUkpPrLs0-Lbt54dK8xq13HcY6JoQeegOprMGOrU/s16000-rw/chrome_2024-10-02_10-23-31.png)
阅读全文

后台设置说明

在 blogger 的 主题背景 - 修改HTML ![](https://blogger.googleusercontent.com/img/a/AVvXsEhf_P0lOWZIEHFyWNJYKEeHa1QSXpGMHrK7HBAGEDYQjIvtze2V411uWAXKFV5iH2fekZPTJ1zJkmB02VWC0um4ZElK9aTKpfDHOP2yPHhx7II2U7a9iaJGmRXAoqGblvxv5K7-DbHpzHsFro4GsHIgCjoNzt6QFtau0jhjqrQ-X3XkDbXNA7w4heiSwXE=s16000-rw) 添加如下 JS 内容. ``` <script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'/> <script src='https://crazypeace.github.io/blogger-replace-markdown-text-html/blogger-replace-markdown-text-html.js'/> ``` ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiaUgCF4QPis0_blyO8MdHD1niI6wbUTtB6qcNjBXbmSRdJg05UeR3I5rO5NOk0-E9SU1JOYUSDpZy42-c1hAAYagUeoi9rLccH9e8YRdKmAR8DhOamDd2ysSVkCWx3EgE0HuJs0_RpicZ73wSbWhUkpPrLs0-Lbt54dK8xq13HcY6JoQeegOprMGOrU/s16000-rw/chrome_2024-10-02_10-23-31.png) 保存 ![](https://blogger.googleusercontent.com/img/a/AVvXsEi0Le8X-zqP8u12oz0GrOHu4WMCgRtszXkX8McZAeCxGB6rdzKMu85qaBWs-2hLoKiEMrY82UA5B47SC3em-LzqhgeFw289uWwW34gJAlum-Ix1tbwiolWRQV074J7Jh...
阅读全文

如果不使用 highlight.js 的代码高亮方案 那么可以添加 copy 按钮

前面的 script 段添加 ``` <script src='https://crazypeace.github.io/blogger-replace-blockquote-to-pre/pre-code-copy-button.js'/> ``` ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGt9Bl9eQdp4UYMxn7xsJxCKqrP78L28HPhRqlt_u2bAO0dhlx5pH0U6w_w_BiW4PUMRVBN_sbzfrMleRPZV3rKcWbrm_NOG2zG7jbjhhVkGNXFuVGcRqylieKUm-Y3BqC3gMsVxdddcgzsvXkgB5o3d75CiJRFQ3Lk1pm-AdGfeHtgmn5QS4L5xcZ5tH8/s1600/firefox_2024-10-03_00-07-01.png) 注意script的顺序 要先把markdown转换为HTML 你的页面上才有 pre code 的元素 然后再给 pre code 添加 copy 按钮 后面的 CSS 段(通过查找 skin 找到位置)添加 ``` /* 代码的字体 */ code { font-family: "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace !important; } /* 代码块的样式 */ code { background-color: whitesmoke; border-radius: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; line-height: 1.42857 !important; padding: 10px; margin: 10px; overflow-x: auto; display: block; } /* 复制按钮 */ /* https:...
阅读全文