ICDYCT / I Can Do, You Can Too

As mentioned last time , I went back to the approach of using blockquote to display code. Well, it's still inconvenient without a copy button.

上回书说到 , 我还是回到了用blockquote显示代码的方案. 那么, 没有复制按钮还是不方便呀.

Besides Google's  code-prettify , I've also tried Prism and highlight.js Prism Usage Add the following in the Blogspot template Result highlight.js can automatically detect the code type, but it's not very accurate — bash gets identified as Ruby If you want bash to be identified correctly, you have to add a # at the beginning of each line. But that makes it inconvenient to copy and paste directly into the command line to run. Detection of JS code works fine. There's also one biggest issue: after I replace blockquote with pre code, highlight.js always displays them on a single line. The problem with displaying command line operation logs Besides the two points above, I have one more specific issue. My tutorials provide command line operation logs so readers can compare whether their own operations are correct. For example, But due to the nature of pre code, the spaces and some special characters inside it are handled differently from other HTML elements. If I convert bl...

除了 google 的  code-prettify , 其实我也尝试过 Prism 和 highlight.js Prism 用法 在blogspot的模板里添加 <link href='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css' rel='stylesheet'/> <script src='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js'/> <script src='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js'/> 效果 Prism没有自动识别代码的功能. 需要写blog时, 切换到html模式手动写 pre code 以及指定代码类型 可以有下面这样的效果. (当然, 配色方案能找到很多选择) highlight.js 用法 <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> 效果 highlight.js可以自动识别代码类型, 不过也不怎么准, bash识别成 Ruby 如果想bash识别准确, 每行命令前面要打那个#号. 那这样又不方便直接复制之后在命令行里直接粘贴运行了. 对JS代码的判断还正常. 还有一个最大的问题, 我把blockquote替换为pre code之后, highlight.js总...

Previously we implemented adding highlighting to code blocks. https://zelikk.blogspot.com/2024/05/blogspot-code-prettify.html However, if a line is too long, it ends up looking like this. Using the mouse to drag and select is very inconvenient. It would be great if there were a copy button at this point. I always thought it was complicated before. Since I have the motivation again today, let's look into it.

之前我们实现了给代码段添加高亮. https://zelikk.blogspot.com/2024/05/blogspot-code-prettify.html 但是如果一行太长, 就会这样. 用鼠标拖着去选择, 很不方便. 这时候如果有个复制按钮就好了. 之前一直以为很复杂. 今天既然又有冲动了, 就查一查吧.