首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >基于prismjs的Typecho代码高亮插件CodeHighlighter

基于prismjs的Typecho代码高亮插件CodeHighlighter

原创
作者头像
小唐同学.
发布2022-02-18 11:22:55
发布2022-02-18 11:22:55
1.9K0
举报
文章被收录于专栏:CMS建站教程CMS建站教程

CodeHighlighter插件是一款基于prismjs的代码语法高亮typecho插件,支持众多常见的代码语言高亮显示,官方提供8种代码高亮风格自由切换,支持显示代码语言类型、行号,以及支持复制代码到剪切板功能。

CodeHighlighter插件安装使用教程:

1、下载CodeHighlighter插件:https://github.com/Copterfly/CodeHighlighter-for-Typecho

2、把下载的压缩包解压出来的文件夹重命名为CodeHighlighter(不改无法启用)

3、上传该文件夹到网站的usr/plugins/目录

4、登录网站后台,在控制台——插件中启用该插件

5、点击插件后面的【设置】进入设置界面,可选择代码高亮风格和是否显示行号

6、编辑文章要添加高亮代码时,根据以下格式填写:

<blockquote>

代码语言:javascript
复制
//codes go here

</blockquote>

scode type="share"示例:/scode

代码语言:javascript
复制
var wl = 'hello,world';
alert(wl);

scode type="share"代码高亮效果/scode

代码语言:javascript
复制
var wl = 'hello,world';
alert(wl);

支持的代码语言类型:

可以选择下载自己想要代码语言的js和css文件,然后分别替换插件的prism.js文件和css文件,路径如下:

prism.js:/CodeHighlighter/static/prism.js

css文件:/CodeHighlighter/static/styles/改为对应的风格名.css

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档