highlight 代码高亮 mac 风格

2024-08-02 18:08 · 默认分类 · 浏览量： · 评论数：

AI摘要：本文介绍了如何从Typecho插件中提取代码高亮功能，并实现Mac风格的代码高亮效果。通过引入相关CSS和JavaScript文件，以及使用jQuery在文档加载完成后对代码块进行高亮处理和添加行号。

Powered by Gemini.

从typecho插件中提取
//cdnjs.sgcd.net

<link rel="stylesheet" href="//cdnjs.sgcd.net/highlight/lines.css"  />
<link rel="stylesheet" href="//cdnjs.sgcd.net/highlight/customemin.css"  />
<script src="//cdnjs.sgcd.net/jquery.min.js"></script>
<script src="//cdnjs.sgcd.net/highlight/clipboard.min.js"></script>
<script src="//cdnjs.sgcd.net/highlight/guess.js"></script>
<script src="//cdnjs.sgcd.net/highlight/highlight.js"></script>
<script>
$(document).ready(function() {
    // 高亮代码块
    $("pre code").each(function(i, block) {
        hljs.highlightBlock(block);
    });
    $("pre code").each(function() {
        var $codeBlock = $(this);
        if ($codeBlock.find("ul").length === 0) { // 检查每个代码块是否已经添加过行号
            var lines = $codeBlock.html().split('\n'); // 分割代码块成行
            var numberedLines = lines.map(function(line) {
                return "<li>" + line + "</li>"; // 包装每行
            });
            $codeBlock.html("<ul>" + numberedLines.join('') + "</ul>"); // 拼接行并重新放入代码块
        }
    });
});
</script>

highlight mac