使文章代码高亮:highlight.js的使用
以前就听过highlight.js,也听过其非常强大,但是一直没折腾,之前写文章一直是自己动手将代码用工具copyHTML格式,然后使用,这样弄的弊端很明显,麻烦不说,还显得很凌乱。今天正好有时间,就折腾了一下highlight.js这个东西,网上的教程很多,官方的文档也非常详细且易懂。

下面简单归纳一下初步的使用方法。首先肯定是到官网(https://highlightjs.org/获取相关资源,截至17年7月31号,最新的版本为9.12.0,打开官网你将看到如下页面:
  文章正文图片

可以点击页面上的languagestyle标签更改不同语言及预览效果。当然你也可以点击右侧的xxx languages and xx styles查看汇总demo(点击此处跳转),查看更方便且快速。

当然,最开始可以不用看主题效果,直接点击首页的 get version xxx跳转到资源获取页面。如下:
  文章正文图片

上面提供了不同的方法,你可以从CDNJS资源库引入资源(默认支持常用的23种语言)。当然,你也可以自行定制,紧随其后的语言标签,勾选自己需要的,去掉不需要的,然后在语言列表最后点击下载即可得到zip资源包,解压之后资源准备工作就算完成了。此外,你也可以通过node.js将其部署在服务器。你还可以在github上获取源码自行研究。 下面新建一个简单的html测试文档进行测试。未方便,我直接在解压得到的文件夹内新建了test.html;目录结构如下:
  文章正文图片

测试文件如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="./styles/gruvbox-dark.css">
    <script src="./highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code>#if 1
#pragma import(__use_no_semihosting)             
// 标准函数库需要的支持函数                
struct __FILE 
{ 
    int handle; 
    /* Whatever you require here. If the only file you are using is */ 
    /* standard output using printf() for debugging, no file handling */ 
    /* is required. */ 
}; 
/* FILE is typedef'd in stdio.h. */ 
FILE __stdout;       
//定义_sys_exit()以避免使用半主机模式    
int _sys_exit(int x) 
{ 
    x = x; 
    return 0;
} 
//重定义fputc函数
int fputc(int ch, FILE *f)
{      
    while((USART1->SR&0X40)==0);               //循环发送直到发送完毕
    USART1->DR = (unsigned char) ch;      
    return ch;
}
#endif 
</code></pre>
</body>
</html>
关键点在于js及css文件的引入及函数的调用。如下三条:
<link rel="stylesheet" href="./styles/gruvbox-dark.css">
<script src="./highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
页面测试的语言为C语言,渲染效果如下:
#if 1
#pragma import(__use_no_semihosting)             
// 标准函数库需要的支持函数                
struct __FILE 
{ 
    int handle; 
    /* Whatever you require here. If the only file you are using is */ 
    /* standard output using printf() for debugging, no file handling */ 
    /* is required. */ 
}; 
/* FILE is typedef'd in stdio.h. */ 
FILE __stdout;       
//定义_sys_exit()以避免使用半主机模式    
int _sys_exit(int x) 
{ 
    x = x; 
    return 0;
} 
//重定义fputc函数
int fputc(int ch, FILE *f)
{      
    while((USART1->SR&0X40)==0);               //循环发送直到发送完毕
    USART1->DR = (unsigned char) ch;      
    return ch;
}
#endif 
可以看到效果还是很赞的。配置完成之后主题之类的就可以自己慢慢挑了。只需更改引入的css文件就能更改主题。

另外,一般富文本编辑器在粘贴代码块的时候一般都会需要指明代码类型,如Java,则粘贴完成之后会在code标签内自动添加类“class=‘Java’”; 那问题来了,如果我的富文本编辑器不要求指明代码类型,那岂不是要手动添加?这里highlight.js的强大之处就体现出来了,他是自动识别当前渲染的语言的,不依赖于指定的class,也就是说不用我们操心,它自动匹配渲染规则,是不是很强大?赞!
It's
欢迎访问本站,欢迎留言、分享、点赞。愿您阅读愉快!
*转载请注明出处,严禁非法转载。
https://www.devsong.org
QQ留言 邮箱留言
头像
引用:
取消回复
提交
涂鸦
涂鸦
热门