Typecho文章代码高亮功能
时间:2022-07-22
本文章向大家介绍Typecho文章代码高亮功能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一种不使用插件来实现几乎所有语言的语法高亮的方法
前言
Typecho
是一款由国人开发的博客程序,它的特点是简洁小巧,扩展性强,并且内置支持Markdown
语法写作,因而很受技术博客作者的欢迎。但是默认的Typecho
没有自带语法高亮
,要实现语法高亮
就要使用Typecho
相应的插件
,而Typecho
的插件
安装和调试都比较难,这里就将介绍一种不使用插件
来实现几乎所有语言的语法高亮
的方法。
PrismJs
PrismJs
是一款轻量、可扩展的代码语法高亮库,使用现代化的Web
标准构建,使用PrismJs
可以快速为网站添加代码高亮功能,支持超过上百种编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案
官网传送门:https://prismjs.com/
1. 下载
1.1 进入下载页面
↓点击 DOWNLOAD 进入下载页面↓
1.2 根据需求进行选择
- 核心代码(必选)
- 主题(我选择的是“贵族黑”,别问我为什么这么叫,任性)
- 语法包(是不是很多,随便选,随便挑,反正不要钱)
- 插件(我用了复制按钮,其他的没试过,自行挖掘)
插件解读
插件是扩展Prism功能的附加脚本(和CSS代码)
- 线条突出显示 - Line Highlight
- 行号 - Line Numbers
- 显示隐形 - Show Invisibles
- Autolinker - Autolinker
- Web平台文档 - WebPlatform Docs
- 自定义类 - Custom Class
- 文件突出显示 - File Highlight
- 显示语言 - Show Language
- JSONP亮点 - JSONP Highlight
- 突出显示关键字 - Highlight Keywords
- 删除初始换行符 - Remove initial line feed
- 预览器 - Previewers
- 自动加载磁带机 - Autoloader
- 保持标记 - Keep Markup
- 命令行 - Command Line
- 非转义标记 - Unescaped Markup
- 规范化空白 - Normalize Whitespace
- 数据URI突出显示 - Data-URI Highlight
- 工具栏 - Toolbar
- 复制到剪贴板按钮 - Copy to Clipboard Button
1.3 下载 css js 文件
↓点击 DOWNLOAD 进行下载↓
2. 配置
2.1 上传 css js 文件
↓把下载下来的js和css文件上传到Typecho的主题目录↓
↓即“usr/themes/主题名”目录下↓
2.2 配置header.php文件
↓进入Typecho的后台,点击“控制台” -> “外观”↓
↓点击“编辑当前外观” -> “header.php”,在左边的代码框中找到 /head ↓
↓在它之前输入如图中的代码↓
↓代码↓
<link rel="stylesheet" href="<?php $this->options->themeUrl('prism.css'); ?>">
<script src="<?php $this->options->themeUrl('prism.js'); ?>"></script>
3. 使用
↓在使用Markdown写文章时,只要在代码块标记```↓
↓标记后面添加你的代码的语言名,如php, javascript等,就可以实现代码高亮展示↓
↓展示↓
function test()
{
$s = "string";
}
- 如何用excel urldecode解码把url编码转为汉字?
- Scikit-learn实战之 SVM回归分析、密度估计、异常点检测
- TensorFlow模拟简单线性模型小栗子
- web跨域解决方案
- Bootstrap幻灯轮播如何支持触屏左右滑动手势?
- JavaScript 调试小技巧
- 图片上传预览js
- Isolation Forest算法实现详解
- css继承样式怎么控制?用选择器
- wordpress站内搜索结果页URL伪静态如何操作
- 如何实现大图居中超过的部分两边自动隐藏
- Ubuntu16.04安装后开发环境配置和常用软件安装
- wordpress如何屏蔽wp-json(禁用REST API)
- 贝叶斯系列——贝叶斯与其他统计流派的区别和联系
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用 shell-operator 实现 Operator
- 我们是如何用 K8S 搞定1000个应用的测试环境
- 关于Python 3.9,那些你不知道的事
- urllib, urllib2, urllib3 都是小弟弟
- 使用 Kustomize 定制 Helm Chart
- 装逼篇 | 抖音超火的九宫格视频是如何生成的,Python 告诉你答案
- 最全总结 | 聊聊 Python 数据处理全家桶(Mysql 篇)
- 6个提升效率的pandas小技巧
- 如何用 Python 让微博热搜榜动起来
- 如何用 Python 让微博热搜榜动起来
- 漫画:什么是 “抽象工厂模式” ?
- 5个很常用的CSS3网页小实例
- 收藏!!!学习Matplotlib看这一份笔记就够了!
- 最全总结 | 聊聊 Python 数据处理全家桶(Sqlite篇)
- Selenium 系列篇(六):反反爬篇