TYPECHO WIKI

非插件实现Typecho语法高亮

发布者:Typecho维基君/更新日期:2019-04-03/人气指数:175

关于Typecho的代码高亮TypechoWiki君给大家分享过几款插件了,今天TypechoWiki君给大家带来的是非插件实现Typecho语法高亮的代码,大家只要跟着TypechoWiki君的操作流程就可以学会这个技能了。

你可能感兴趣:
Typecho 代码高亮插件 CodeBox
Typecho 基于 prismjs 的代码语法高亮插件 CodeHighlighter
Typecho 搜索来源关键字高亮插件 highlight
Typecho 代码高亮插件 CodeStyle

我们今天要实现的代码高亮是通过prism高亮代码库来实现的,首先打开Prism官网:https://prismjs.com/

pare.jpg

Prism 是一个轻量级并且简单易用的 JavaScript 类库,压缩版本只有 1.5kb 大小左右,即使添加了语言定义的CSS代码文件,最大也不会超过 2kb,是我目前使用过的最小的代码高亮 JavaScript 类库。
Prism 使用非常简单,只需添加 Javascript 和 CSS 就能够轻易的将其整合进项目中使用。目前它已内置了 HTMLCSSJavascript 三种语言的高亮支持,你也可以添加新的语法高亮配置文件,只需修改 Javascipt 和 CSS 文件就行。除此之外,它也提供了额外的插件功能,让你可以新增其它功能,比如自动转换链接等,你也可以自己撰写插件。
目前 Prism 唯一的缺点就是不支持 IE8,看作者的博客介绍,也不想支持 IE8。

进入Prism官方页面的Download下载页,并在下载页面中选中你想要实现语法高亮的语言,如下图所示:

非插件实现Typecho语法高亮

下载js文件(prism.js)和css文件(prism.css)如下图所示:

非插件实现Typecho语法高亮

将下载的js和css文件上传到Typecho的主题目录,即“usr/themes/主题名”目录下,如下图所示:

非插件实现Typecho语法高亮

登陆进入Typecho的后台,点击“控制台” -> “外观” —> "编辑当前外观"

非插件实现Typecho语法高亮

编辑“header.php”,在"<heand></head>"标签中插入如下代码

非插件实现Typecho语法高亮

<link rel="stylesheet" href="<?php $this->options->themeUrl('prism.css');?>">
<script src="<?php $this->options->themeUrl('prism.js');?>"></script>

在使用Markdown写文章时,只要在代码块标记`标记后面添加你的代码的语言名,如php, javascript等,就可以实现代码高亮展示。

非插件实现Typecho语法高亮

本文检索关键词:typecho,代码高亮
赞助支持

添加新评论 »