博文

如果不使用 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:

后台设置说明

在 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

测试JS代码显示效果

``` 'use strict' /** * static files (404.html, sw.js, conf.js) */ const ASSET_URL = 'https://crazypeace.github.io/gh-proxy/' // 前缀,如果自定义路由为example.com/gh/*,将PREFIX改为 '/gh/',注意,少一个杠都会错! const PREFIX = '/' // 分支文件使用jsDelivr镜像的开关,0为关闭,默认关闭 const Config = { jsdelivr: 0 } const whiteList = [] // 白名单,路径里面有包含字符的才会通过,e.g. ['/username/'] /** @type {RequestInit} */ const PREFLIGHT_INIT = { status: 204, headers: new Headers({ 'access-control-allow-origin': '*', 'access-control-allow-methods': 'GET,POST,PUT,PATCH,TRACE,DELETE,HEAD,OPTIONS', 'access-control-max-age': '1728000', }), } const exp1 = /^(?:https?:\/\/)?github\.com\/.+?\/.+?\/(?:releases|archive)\/.*$/i const exp2 = /^(?:https?:\/\/)?github\.com\/.+?\/.+?\/(?:blob|raw)\/.*$/i const exp3 = /^(?:https?:\/\/)?github\.com\/.+?\/.+?\/(?:info|git-).*$/i const exp4 = /^(?:https?:\/\/)?raw\.(?:githubusercontent|gi

新建博文操作

在blogger新建博文时, 切换到HTML视图. ![](https://blogger.googleusercontent.com/img/a/AVvXsEiBpcg06OVIVQ3qxfKw6SB1YEfyF7zoJH0oLD-ddks8eMRB_MT4nlaqVR8t_fgVDChGWde0EfIXbUa7EVE9VsLXY5khhtIxValSrO1rBRrR9taRyPtcWIZ7MD-kc86Ulj-aZyvpYy1ZnbUM3YAiKCk7VKEol98ooLhtsSbq75l7_O-UxLdZM_lSEvTZH4o=s16000-rw) 然后在html编辑器中直接写裸markdown文本,如: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYY6FnucIdAL7RUwmZcQSCJAeWgTOz1Yg8MqQDt_uYIWJHDXxN8MDFOqzbmKzrh-YX9Qmf7qEJ5bSH_fzn1hAAcba4Xg0QZjHJZMo7np4ZxVUNPU5G7799AgdgPTjcsljV8rA1qixS1esHXPkMeHefb1kBs1KLQoElkJcpKebtTsWTmdji1whuglpwOnsP/s1600/chrome_2024-10-02_15-10-06.png) 最后发布即可。 ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiKLKm_u0FTccxmBFusc8V8bDZLwk9c-Kr_7KUbJH8mcuMs-D81mib8OREcfqXMB5BRNYzULMoWmQ98i_IdEglw34by0CJVVsBJLKgDtbBIfs6i5UyVBE3yt7D1_yDh7fT7RFHlLnC3nNFK14tYHECRDlrYDtspYUvchtkEs4lISHLyeTVNB2rg5hP0zFB/s1600/chrome_2024-10-02_15-21-42.png)

测试bash脚本代码显示效果

``` bash <(curl -L https://github.com/crazypeace/xray-vless-reality/raw/main/install.sh) ```

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)