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

2024-05-24 15:09:35

对于程序猿写博客来说，这代码高亮是起码的要求。可是Ghost本身没有支持高亮代码。

可是能够通过扩展来实现，它就是highlight.js——附官方站点，看了下首页介绍，真的非常强大，如今说说怎么进行安装,非常easy。

下载highlight.js

下载地址

本来已经包括了非常多支持的高亮语言，假设上面没找到你要的语言，能够在以下继续勾选。最后点击下方的下载。

解压安装highlight.js

解压highlight.js到Ghost本地的主题目录以下的资源目录。我这里是：

安装highlight.js

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

找到{{! Styles’n’Scripts }}，在以下加入：

<link rel="stylesheet" type="text/css" href="{{asset "/highlight/styles/hybrid.css"}}" />

这里的hybrid.css是你想用的代码主题。这里我用的hybrid.css,，个人喜好。还能够选择styles目录下的其他主题样式。你能够到这个站点预览各种风格的代码主题，选择自己喜欢的。

找到{{! The main JavaScript file for Casper }}，在以下加入：

    <script type="text/javascript" src="{{asset "/highlight/highlight.pack.js"}}"></script><script type="text/javascript">hljs.initHighlightingOnLoad();</script>

怎样使用代码高亮

用Ghost自带的markdown编辑器时。依照例如以下格式：

<pre><code class="python">...</code></pre>

python能够换成其他的语言。

Ok。如今能够体验代码高亮的感觉了！效果例如以下，这是一段python代码：

Ghost本地安装highlight.js使代码高亮相关推荐

highlight.js（代码高亮插件）
highlight.js(代码高亮插件) 官网用法查看核心 API Highlight.js 将一些函数导出为hljs对象的方法强调 highlight(code, {language, ign ...
安装vimplus实现c++代码高亮与自动补全功能的若干问题
安装vimplus实现c++代码高亮与自动补全功能的若干问题 1.按照vimplus官方的手册安装 git clone https://github.com/chxuan/vimplus.git ~/ ...
博客园使用highlight.js对代码进行高亮，并实现自定义关键词高亮
看了网上那么多有关highlight.js的教程,自己还没学过JavaScript和CSS,硬是花了3天的时间,才终于弄出了自己想要的效果.一开始我的博客园代码高亮效果是这样的: 个人希望代码块能够实 ...
原生JS实现代码高亮功能
实现步骤分析如何实现该功能了解词法结构 Javascript的产生式少废话,上代码分析如何实现该功能平时我们在使用一些代码编辑器或者Markdown时很好奇它的代码高亮是如何实现的.其实原 ...
个人网站搭建（Day 8）— Django-simditor的使用以及代码高亮
Django-simditer富文本编辑器的使用我们在博客个人网站搭建(Day 4)- My second app:blog 中提及我们改用富文本编辑器来编辑博文,今天我们就介绍一下富文本编辑器 ...
Vue中如何实现代码高亮功能？
目录 1.下载依赖 2.在main.js文件中导入包 3.同样是在main.js文件中自定义一个指令 4.在vue文件中使用指令 5.效果展示 1.下载依赖 npm install highlight ...
Ghost配置2——添加代码高亮
使用Ghost的初体验,主题外观都很满意,除了代码段的显示效果. 没有代码高亮,这效果怎么说呢?就像是使用了文本编辑器在写代码,说不上离经叛道,但就是从心底觉得一个字:土. 用Ghost加高亮做关键字 ...
想有自己的博客吗？浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)
MarkDown,写作神器,还是有必要掌握一下.写作也是一种很重要的能力,需要长久坚持和锻炼. 写作能力重不重要?语文重不重要?读书重不重要? 我觉得语文和写作能力是所有能力的基础,是重中之重.因为你 ...
js显示格式化代码并高亮（vue中实现代码高亮）
文章目录 js 实现代码格式化调用 api 实现代码高亮引入用法 highlight.js 高亮代码不换行 innerText 和 innerHTML 有什么区别解决 innerHTML 渲染 ...

最新文章

热门文章