对于代码的高亮一般有两个，highlightjs 以及Prism。下面我们对他们都进行一番详细介绍。
Prism.js 用法
<!-- Prism 样式：Monokai 风格 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-one-dark.min.css" rel="stylesheet" />
<!-- Prism 主库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<!-- Prism C语言支持，默认的支持js,css,html基本语言，有需要自己导入特定语言 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>
导入到对应的HTML ,
中即可。代码修饰用法
<pre class="line-numbers"><code class="language-xxx">
代码
</code></pre>
针对highlightjs
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>
同样的放到元素
中<script>hljs.highlightAll();</script>
将代码放到
中。代码修饰用法
<pre class="line-numbers"><code class="language-xxx">
代码
</code></pre>
添加行号
- Prism
<!-- Prism 行号插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<!-- Prism 行号插件样式 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />
- higtlightjs
<!-- Highlight.js 行号插件 -->
<script src="https://cdn.jsdelivr.net/gh/wcoder/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js"></script>
<!-- 启动行号 -->
<script>
hljs.initLineNumbersOnLoad();
</script>
对比
两者之间没有绝对的优劣之分，各有特点
- Prism 代码更小，支持语言需要特定方式导入。（有些语言不高亮了，你需要找特定语言的插件）
- highlightjs 支持代码多，但是他的包很大，会影响网页加载速度。
代码转换
将代码放入到<pre><code>中，由于HTML会进行编译处理，为了避免代码中的转义错误。你需要将<和 >转换成 HTML 实体 < 和 >，以避免它们在浏览器中被解析为 HTML 标签。
补充
点击highlightjs 官方Demo 你可以看检查效果，那么主题名称与文件是如何对应的的呢？
正确的主题替换方式：主题a11y-dark-mini 替换/default.min.css 成对应对应文件名：a11y-dark.mini.css
替换方式：a11y-dark.mini.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/a11y-dark.mini.css"/>
代码转义工具
Related Post:
Tags:
Blogger