站点《小鸟数据》曾经使用过Typecho的Lpisme主题,该主题集成了Prism以实现语法高亮。Prism是一个轻量级,可扩展的语法着色工具,在支持现代 Web 标准基础下增加了更多可选的风格插件。Prism非常易于使用,只需要在页面引入一个css和一个js文件即可。以下就是Lpisme主题的文件引入语句,主题分别将两个文件置于了主题根目录的assets文件夹以及js文件夹下:
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/prism.css'); ?>">
<script src="<?php $this->options->themeUrl('js/prism.js'); ?>" ></script>
在实际页面中,查看一下页面源代码,可以看到以上两条命令实际展现如下:
<link rel="stylesheet" href="https://www.abddb.com/usr/themes/lpisme/assets/prism.css">
<script src="https://www.abddb.com/usr/themes/lpisme/js/prism.js" ></script>
上面的代码即应用了代码高亮,在Typecho编辑器中,使用如下语句包裹代码,就可以实现代码高亮的效果:
```(代码种类:如html)
(实际代码块)
```
/比如可以用这样的形式包裹一段php代码/
```php
(实际代码块)
```
/比如可以用这样的形式包裹一段css代码/
```css
(实际代码块)
```
" ` "符号又称为抑音符,可在英文输入状态下按键盘左上方"~"输入。Prism支持众多语法,在其官网下载页面允许用户自行定制所需要的语言种类,官网下载地址如下:
https://prismjs.com/download.html
如果当前使用的Typecho主题不支持语法高亮,自行添加也是可以的,只需要将Prism的两个文件下载到当前所使用主题的根目录,然后打开当前主题的header.php文件,在</head>代码之前添加如下代码即可:
<link rel="stylesheet" href="<?php $this->options->themeUrl('prism.css'); ?>">
<script src="<?php $this->options->themeUrl('prism.js'); ?>" ></script>