如何在这使用Prism.js

关于如何使用短代码可以参见这篇文章。

用于代码高亮的短代码是"code"。你需要把要高亮的代码放在短代码标签内，然后设置属性。

属性描述可用值默认值
lang代码语言必填，详见官方文档。''，会显示为文本。
line_number_start行号从多少开始大于0的任何整数。-1，不显示行号。
cmd_user以控制台命令的形式显示时，用户名应该显示为什么。'cmd_'开头的三个参数无论哪个有值都会开启“控制台命令”显示模式。字符串null，以控制台命令的形式显示时，默认为user
cmd_host以控制台命令的形式显示时，主机名应该显示为什么。字符串null，以控制台命令的形式显示时，默认为localhost
cmd_prompt以控制台命令的形式显示时，提示符应该显示为什么。此属性有赋值时会忽略cmd_user与cmd_prompt字符串。多用于Windows系命令的显示。如"C:\>"null
src从哪里加载要显示的代码文件。字符串，要显示的代码文件的URL。''，不从文件加载。
match_brace显示配对的括号。与src不兼容。布尔值false

下面的这些属性会影响整个页面上的"Code"短代码，因此仅需要在第一个code中设置即可。

属性描述可用值默认值
theme控制Prism.js的显示主题。数字，是下面这个数组的数组下标['', 'coy', 'dark', 'funky', 
'okaidia', 'solarizedlight', 
'tomorrow', 'twilight']		默认主题，即数组的第一个，下标为0.
client_autoload是否使用客户端脚本自动加载显示语言所需要的脚本文件。布尔值true
show_lang是否显示语言标签。布尔值false
autolink是否自动标出代码中的链接。布尔值false
preview是否显示部分CSS属性的预览。布尔值false
inline_color是否显示CSS样式颜色的预览。布尔值false

用例

lang="bash" cmd_user=root

[code lang="bash" cmd_user=root]cd /
rm -rf[/code]

lang="bash" cmd_host=yukicat.net

[code lang="bash" cmd_host=yukicat.net]git clone https://github.com/YukiCat-Dev/FacePack.git[/code]

preview=true show_lang=true autolink=true

除了CSS以外，还支持Less、Markup attributes（如HTML的行内样式）、Sass、Scss、Stylus等。

[code lang="css" preview=true show_lang=true]//[code lang="css" preview=true show_lang=true]
//CSS代码来自于https://prismjs.com/plugins/previewers/
.example-gradient {
background: -webkit-linear-gradient(left, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Chrome10+, Safari5.1+ */
background: -moz-linear-gradient(left, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
background: -ms-linear-gradient(left, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* IE10+ */
background: -o-linear-gradient(left, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Opera 11.10+ */
background: linear-gradient(to right, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* W3C */
}
.example-angle {
transform: rotate(10deg);
}
.example-color {
color: rgba(255, 0, 0, 0.2);
background: purple;
border: 1px solid hsl(100, 70%, 40%);
}
.example-easing {
transition-timing-function: linear;
}
.example-time {
transition-duration: 3s;
}[/code]

Pages: 1 2 3