Ghost本地安装highlight.js使代码高亮

最新推荐文章于 2024-08-21 09:20:55 发布
最新推荐文章于 2024-08-21 09:20:55 发布
阅读量3.9k 收藏 1
点赞数 2
分类专栏： Ghost博客 文章标签： Ghost highlight 代码高亮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abclixu123/article/details/46732867
版权
本文介绍了如何在Ghost博客中通过highlight.js实现代码高亮。首先从官方地址下载并解压highlight.js，然后将其放入Ghost主题的资源文件夹。接着，在default.hbs文件中添加相关样式和脚本引用。最后，按照markdown格式插入代码块，即可享受高亮显示的代码效果。
摘要由CSDN通过智能技术生成

对于程序员写博客来说，这代码高亮是起码的要求。但是Ghost本身没有支持高亮代码。但是可以通过扩展来实现，它就是highlight.js——附官方网站，看了下首页介绍，真的很强大，现在说说怎么进行安装,很简单。

下载highlight.js

下载地址

本来已经包含了很多支持的高亮语言，如果上面没找到你要的语言，可以在下面继续 勾选，最后点击下方的下载。

解压安装highlight.js

解压highlight.js到Ghost本地的主题文件夹下面的资源文件夹，我这里是：
安装路径

安装highlight.js

用文本编辑器打开theme文件夹下的default.hbs文件进行编辑：

找到{ {! Styles’n’Scripts }}，在下面添加：

<link rel="stylesheet"
最低0.47元/天 解锁文章
Suagr
关注
专栏目录
在Ghost博客 中使用 highlight.js 实现 代码高亮
Poppin_Category的博客
01-03 3465
谢谢搭建好Ghost后，默认并不会对页面中的代码作其他处理，并不能直观地显示出代码结构，我们可以通过highlight.js的帮助实现代码高亮。 ==此教程非常简易明了，助你在CentOS轻松用上highlight.js==顺手贴上highlight.js的介绍: –支持 71种编程语言的语法解析
highlight.js
02-02
highlight.js独立的JS文件，下载highlight.js后可以直接使用...
JavaEE日常工作经验总结系列（十一）-----Ghost博客安装代码高亮
疾风知劲草，智者必怀仁
07-15 280
Ghost博客安装代码高亮 以下问题可以参考我的另外一篇文章Ghost博客安装 什么是ghost博客？ 怎么安装？ 可以参看的我个人博客网站，基于ghost搭建，正再在修改样式主题，地址：码酱博客 Prism.js插件 官网：Prism官网 选择你喜欢的代码风格，然后下载css文件和js文件。 简介一下Prism Prismjs 是一款轻量、可扩展的代码语法高亮库，使用现...
Highlight.js 开源项目教程
最新发布
gitblog_00801的博客
08-21 241
Highlight.js 开源项目教程 highlight.jsJavaScript syntax highlighter with language auto-detection and zero dependencies.项目地址:https://gitcode.com/gh_mirrors/hi/highlight.js 一、项目目录结构及介绍 Highlight.js 是一个广泛使用的代...
Ghost配置2——添加代码高亮
weixin_34238633的博客
10-19 308
使用Ghost的初体验，主题外观都很满意，除了代码段的显示效果。 没有代码高亮，这效果怎么说呢？就像是使用了文本编辑器在写代码，说不上离经叛道，但就是从心底觉得一个字：土。 用Ghost加高亮做关键字，能搜出一大堆的代码高亮方案。不过在Ghost版本2.0以后，再去修改代码来载入js和css文件已经没有必要。因为Ghost有了新的功能：代...
highlightjs
【轰炸机】的博客
11-13 131
官网 https://highlightjs.org/ 测试html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>high light js index</title> <link rel="stylesheet" href="/webjars/highlightjs/styles/atelier-cave-dark.css"> <scri
markdown-stream-utils:使用对象模式流处理markdown文件的实用程序功能。 由markdown样式和ghost-render使用
05-10
v1.1.0 ：做highlight应用的语法高亮如果highlight.js可用的特定语言。 添加了md.marked并添加了opts到md.convertMd() 。 原料药 入门 所有markdown-stream-utils函数都希望接收代表每个markdown文件的对象。 这些...
Draugur:基于默认 Casper 主题并受 GitHub 和 Medium 启发的 Ghost 主题
06-30
Draugur 使用 Highlight.js 和 GitHub 的语法颜色进行语法高亮显示。 可选注释 Draugur 通过 Disqus 发表评论。 结构化数据 Draugur 根据构建了数据结构 发展 目前正在开发以下功能： 特色图片 高级图像支持（画廊...
天行者：幽灵博客的材料设计主题
02-03
天空步行者 一款材料设计风格的响应式简约ghost博客主题 安装使用 下载主题压缩包，上传至...markdown样式与github相同，代码高亮使用highlight.js 屏幕截图 移动： 个人电脑 持续更新中，欢迎使用+ star / fork。。。
js使用highlight.js高亮你的代码
10-19
本篇文章主要介绍了js使用highlight.js高亮你的代码 ，非常具有实用价值，需要的朋友可以参考下
highlight.js（代码高亮插件）
热门推荐
小王的技术库
05-28 1万+
highlight.js（代码高亮插件） 官网 用法查看 核心 API Highlight.js 将一些函数导出为hljs对象的方法 强调 highlight(code, {language, ignoreIllegals}) 核心高亮功能。接受代码以突出显示（字符串）和选项列表（对象）。该language参数必须存在并指定用于突出显示的语法的语言名称或别名。这ignoreIllegals是一个可选参数，即使在检测到语言的非法语法而不是抛出异常的情况下，真正强制突出显示完成时也是如此。 返回具有以下
[ 插件 ] 程序员必备的代码高亮插件 Highlight.JS
记录开发日常
08-14 4205
代码的样式直接的影响了阅读效果，一个好的代码高亮风格将会有好的体验。 所以就需要用到代码高亮这款插件 Highlight.JS 来优化代码阅读的体验。
让 Ghost 不通过加载 js 文件来实现代码高亮
weixin_33729196的博客
01-29 111
我们添加代码高亮一般都是＋css ＋js来实现的，不过么我们既然是使用 Ghost，基于 Node.js ，我们在后台用 Markdown 书写内容，然后 Ghost 将 markdown 转为 html 代码。如果在 markdown 转为 html 这个过程中调用 prism.js 处理代码片段，那生成页面只需有 CSS 样式就可实现高亮，不用引用J...
highlight
The One Who's at the Front
03-13 554
highlight\color{blue}{highlight}highlight 适用于Vue中。 1.安装： npm install --save highlight.js 2.assets下面新建文件夹highlight,文件夹下建highlight.js文件(文件名任意写) | ——assets \qquad|——highlight \qquad\qquad|——highlight....
Highlight.js-高亮代码
positive_qrq的博客
06-21 748
Highlight.js Highlight.js是用JavaScript编写的 语法突出显示工具。 github, 它在浏览器和服务器上均可使用。 它几乎可以与任何标记一起使用，不依赖任何框架，并且具有自动语言检测功能。 Vue中使用highlight.js格式化高亮代码 1.安装 npm install highlight.js --save //默认导入将导入所有语言 2.引入 import hljs from 'highlight.js'; // 样式文件 import('highl
JS库之Highlight，Java400道面试题通关宝典助你进大厂
m0_63174529的博客
11-10 1031
找到highlight.js，点击复制 <script> 标签 通过CDN引入highlight-js： 接下来引入主题： 由于主题有很多种风格，这里随便选一种风格 按住Ctrl+F搜索styles: 点击复制<link>标签 通过CDN引入highlight-css： ![在这里插入图片描述](https://img-blog.csdnimg.cn/7a1bc62ad4834cd39 【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】 .
highlight.js的使用
weixin_53999350的博客
03-06 4479
​如果您需要对的初始化进行更多控制，可以使用和configure函数。这使您可以更好地控制要高亮显示的内容。});});更多配置选项。​强烈建议对代码块进行包装。因为这非常语义化，开箱即用，零污染。也可以使用其他HTML元素，但您可能需要特别注意保留换行符。假设使用div});在不使用的情况下，通过CSS中的div.code {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值