prism代码高亮与highlight代码高亮两种方式

& lt gt < 代码高亮 prism https script& > 编程进阶笔记

发布日期 2022-09-01 更新日期 2022-09-01 阅读次数 194 文章字数 3.1k

highlight代码高亮

这是一种自动嗅探的高级代码高亮功能，真正的自动识别代码并高亮，几乎是最简单的代码高亮了。

先看看示例：

<!DOCTYPE html>
<html>

<head>
    <title>Prism</title>
    <link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.6.0/styles/default.min.css">
    <script src="//unpkg.com/@highlightjs/cdn-assets@11.6.0/highlight.min.js"></script>
</head>

<body>

    <pre style="font-size: medium; word-spacing: 0px;"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;bootstrap 101&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"&gt;
    &lt;script src="https://www.52dixiaowo.com/tools/npm/jquery@1.12.4/dist/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="content"&gt;
    &lt;h1 style="margin:0px;"&gt;Hello，Bootstrap3！&lt;/h1&gt;

    &lt;/div&gt;
    &lt;div id="footer"&gt;
        &lt;p style="text-align:center;margin:0px;"&gt;copyright &amp;copy; zhufenghua 2022&lt;/p&gt;
    &lt;/div&gt;

    &lt;script&gt;
        $(function() {
            const height = $("hua_footer").height();
            $("hua_content").css("min-height", (document.documentElement.clientHeight - height) + 'px');
        })
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>

    <script>
        hljs.highlightAll();
    </script>


</body>

</html>

你只需要引入 css 和 js，并调用 hljs.highlightAll() 即可，特别适合于懒人，以及那些没有默认格式的编译器所写出来的代码，比如 wordpress。

下载：highlight.js (highlightjs.org)

如何使用？参考：How to use highlight.js (highlightjs.org)

总的来说，自动嗅探，是它的一大亮点。

prism代码高亮

prism实现代码高亮，非常简单，只需要下载js和css，引入文件就可以了，什么都不用做。（特别适合于自带language-语言类的编辑器，比如tinymce）

下载地址：Download ▲ Prism (prismjs.com)

先看看以下CDN实例：

<!DOCTYPE html>
<html>

<head>
    <title>Prism</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js"></script>
</head>

<body>

    <pre class="language-markup" style="font-size: medium; word-spacing: 0px;"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;bootstrap 101&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"&gt;
    &lt;script src="https://www.52dixiaowo.com/tools/npm/jquery@1.12.4/dist/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="content"&gt;
    &lt;h1 style="margin:0px;"&gt;Hello，Bootstrap3！&lt;/h1&gt;

    &lt;/div&gt;
    &lt;div id="footer"&gt;
        &lt;p style="text-align:center;margin:0px;"&gt;copyright &amp;copy; zhufenghua 2022&lt;/p&gt;
    &lt;/div&gt;

    &lt;script&gt;
        $(function() {
            const height = $("hua_footer").height();
            $("hua_content").css("min-height", (document.documentElement.clientHeight - height) + 'px');
        })
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>

</body>

</html>

它并不需要手动实例化，只需要引入，当然，你得保证确实存在这样的 <pre class="language-xxx"><code>代码</code></pre> 的结构，好在一般的编辑器都是这样的，比如wordpress也不例外，你只需要手动指定区块额外的类即可。

prism代码高亮与highlight代码高亮两种方式

highlight代码高亮

prism代码高亮

发表评论

checkbox默认传值问题

iframe子父页面信息传递与监听

linux保持后台进程不被关闭nohup &

mysql Timestamp或dateTime格式筛选

ab测压命令，apache测压工具

php 加速、提高并发opcache

让iframe嵌入的视频自适应 （100%宽度）？

js如何避免重复监听addEventListener事件？

golang获取命令行参数方法总结

正则表达式，实现if...then...else

MySQL用户自定义变量

Shell 指定行处理head、tail、sed

如何在 PHP 中将字符串的第一个字母转换为大写

php正则表达式原生字符

html浏览器当前tab标签切换时触发监听

Javascript 显示当前滚动条滚动的百分比

html同一个页面有两个相同id ，如何用id选择器选中

linux文件的三个时间atime,mtime,ctime分别表示什么？

linux递归统计文件夹大小、du命令_Linux du命令：查看文件夹和文件的磁盘占用情况

git add -A 和 git add . 的区别

{{item.title}}

让iframe嵌入的视频自适应（100%宽度）？