杂货铺

杂货铺中囤杂货

👉 所有文章
技术 理解 HTML 中的 pre 标签 使用 prismjs 代码高亮库 理解 sitemap.xml 解决 Intellij IDEA 右下角不显示 git 分支的问题 并发与并行的区别 ASCII码对照表 理解字符编码、Unicode、UTF-8、UTF-16 认证与鉴权的区别
工具 DBeaver: 跨平台的数据库管理工具 Snipaste: 一个非常好用的截图、贴图工具 常见的网页版流程图、UML建模工具 实用 Chrome 谷歌浏览器插件 低多边形图片生成工具 一些好用的 Markdown 编辑器 Windows 下好用的软件 使用 Genymotion 模拟 Android 环境 实用工具整理 实用网站整理 calibre - 电子书管理软件
其他 试用Atom编辑器 解决谷歌索引404网页的问题 解决论文编译后没有参考文献 思维导图,认清自己,制定目标 想法若干——关于地图 man2:一个快速查找命令使用示例的工具 浅入浅出CouchDB:CouchDB安装 浅入浅出CouchDB:使用curl管理CouchDB 如何修改自己在github中的项目 对c++指向数组指针的一些理解 升级wordpress出现错误:Request exceeded the limit of 10 internal redirects The spirit of softwares 方法链 一些不错的网站 苹果的swift 如何现代化院系的网站 事前、事中、事后 关于选择的一些思考 重要紧急矩阵 二八定律 真相 如何在电脑上使用微信读书 ? 如何关闭微信读书的「看一看」? 从零开始Docker化Ghost博客系统 ghost博客添加多说评论 以生产模式运行Ghost博客系统 Ghost博客主题制作简明教程 将Ghost打造成一个本地APP 重置Ghost博客中的用户密码 在Ubuntu中安装Ghost博客系统 为Ghost博客添加标签云
已迁移 【已迁移】故事: 2020 【已迁移】故事: 2019-nCoV 肺炎

使用 prismjs 代码高亮库


primejs 可以对 html 中pre标识的源代码进行高亮。

官网:https://prismjs.com

如何下载

进入 https://prismjs.com/download.html ,选择主题、要支持的编程语言、插件,然后下载 js 和 css 文件(名称是 prism.js、prism.css)。

在 HTML 中引入 js 和 css 文件即可。

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="assets/prism.css"/>
    <style>
        .container {
            margin-top: 50px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>

<div class="container">
<pre>
<code>12
print 'hi'
print 'hello hello hello hello hello hello hello hello hello hello hello'</code>
</pre>
</div>

<div class="container">
<pre>
<code class="language-python">12
print 'hi'
print 'hello hello hello hello hello hello hello hello hello hello hello'</code>
</pre>
</div>

<script type="text/javascript" src="assets/prism.js" ></script>
</body>
</html>

上面的代码中引入了 bootstrap.css ,它不是必须的,只是用于辅助页面的展示效果。

我们看下代码渲染效果:

第1个 pre 代码块中 code 没有使用language-xxx 作为class,所以prismjs不会去渲染。 第2个 pre 代码块中 code 使用了language-python 作为class,所以prismjs按照Python语法进行了渲染。

示例2

使用 line number 插件显示行号。用法很简单,在pre 或者 code 中加上 line-numbers 即可。

<div class="container">
<pre class="line-numbers language-python">
<code>12
print 'hi'
print 'hello hello hello hello hello hello hello hello hello hello hello'</code>
</pre>
</div>

<div class="container">
<pre class="line-numbers">
<code class="language-python">12
print 'hi'
print 'hello hello hello hello hello hello hello hello hello hello hello'</code>
</pre>
</div>

<div class="container">
<pre class="">
<code class="language-python line-numbers">print 'hi'</code>
</pre>
</div>

效果:

可以看到,language-xxx 也可以加在 pre 的 class 中,但是不推荐。

示例3

在prismjs下载界面选择dark主题,重新下载js和css。

示例:

<div class="container">
<pre>
<code class="language-python">12
print 'hi'
print 'hello hello hello hello hello hello hello hello hello hello hello'</code>
</pre>
</div>

<div class="container">
<pre class="">
<code class="language-python">print 'hi'</code>
</pre>
</div>

效果:


( 本文完 )

文章目录