测试highlighter语法高亮

一些Highlighter参数简介:

<div class="cnblogs_Highlighter">
<pre class="
brush: cpp; //指定编程语言,以此来决定代码着色规则
title:null; //设置显示在被着色代码块上方的Title。**该参数不生效
auto-links: fasle; //是否自动将网址转换为链接,默认关闭。**该参数不生效
collapse: false; //是否默认折叠代码块。默认不折叠。**该参数不生效
first-line: 1; //设定行号的起始数值,默认从1开始。
gutter: true; //是否允许代码块显示行号。默认显示
highlight: null; //标记重要行,可用[1,3,5]这类格式,让它们高亮显示。默认不高亮
html-script: false; //是否开启 HTML/XML 标签着色特性。默认关闭。
light: false; //是否开启轻量模式。默认关闭。开启轻量模式等同于"gutter: false"  +  "toolbar: false"
ruler: false; //是否在代码上方增加一行,用于标注代码所使用的列数。默认关闭。**该参数不生效
smart-tabs: true; //是否启用智能制表符缩进
tab-size: 4; //制表符长度
toolbar: false; //设置是否显示工具栏。默认关闭。**该参数不生效
">
//代码位置
//代码位置
</pre>
</div>

示例代码:

<div class="cnblogs_Highlighter">
<pre class="brush: python;first-line: 1;gutter: true;highlight: [2,3];">
print('hello world hello world hello world hello world hello hello world')//代码位置
print('hello world')//代码位置
print('hello world hello world hello hello world')//代码位置
</pre>
</div>

效果如下:

print('hello world hello world hello world hello world hello hello world')//代码位置
print('hello world')//代码位置
print('hello world hello world hello hello world')//代码位置

注:这种代码块高亮,最好保持代码长度在一行以内,要适配手机最好不要着重显示,且很多参数无法修改。


不着重且显示行号,效果如下:

print('hello world hello world hello world hello world hello hello world')//代码位置
print('hello world')//代码位置
print('hello world hello world hello hello world')//代码位置

参考链接:
https://www.cnblogs.com/heyuquan/archive/2012/09/28/2707632.html
https://wordpress.diguage.com/archives/59.html


posted @ 2022-09-24 02:20  jianmuzi  阅读(74)  评论(0编辑  收藏  举报
TOP 底部