Ghost本地安装highlight.js使代码高亮
对于程序猿写博客来说,这代码高亮是起码的要求。可是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 页面 代码高亮
官网:https://highlightjs.org/ 功能: 支持 155 种编程语言的语法解析:拥有 73 种样式 自动检测编程语言 可以在 node.js 平台上运行 支持各种标签 与任何 js ...
- 测试使用highlight.js的代码效果
---恢复内容开始--- C#代码 private void NextDateUpdate(DateTime dtt) { dtt.AddDays(); Response.Write("dt ...
- IDEA中使用插件添加更多可选择的主题,使代码高亮,缓解视觉疲劳
1.点击 File-->settings(或Ctrl+Shift+S)打开IDE设置面板 点击plugins-->右侧选择Marketplace-->搜索框中输入Material-- ...
- 本地安装node.js模块
一.需求 单位电脑不让上网,但是需要用到一个node.js模块,elasticdump. 二.解决 1.自己电脑上下载模块: npm install elasticdump -g 注意:必须要加 -g ...
- 使用 Google Code Prettify 实现代码高亮
今天这篇文章主要讲述使用 google-code-prettify 来实现代码的高亮显示,以前我使用 highlight.js 来实现文章中代码的高亮显示. prettify 非常小巧且配置简单,使用 ...
- SyntaxHighlighter 代码高亮极简单配置
页首Html代码: <!--<link type="text/css" rel="stylesheet" href="https://bl ...
- 【highlight.js】页面代码高亮插件
[highlight.js] 很多博客都支持页面插入各种语言的代码,而这些代码肯定是有高亮设置的.那么在我们自己的页面上如何进行代码高亮设置?有现成的这个highlight.js插件我们可以使用. h ...
- 用 highlight.js 为文章中的代码添加语法高亮
来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ --------------- ...
- highlight.js 代码高亮插件的使用
在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下 ...
随机推荐
- JS 绘制心形线
JS 绘制心形线 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...
- Web框架之Django_02基本操作(Django项目启动配置、数据库连接、orm、增删改查)
摘要: Django项目简单现实过程 pycharm连接数据库 Django之orm简单操作增删改查 一.新建Django项目.配置.设置: 新建Django项目:(为了熟悉Django操作,暂时全部 ...
- 使用VS2015编写驱动时出现的部分错误以及解决方法
前几日在github上下载了一个Windows驱动的demo,原本想着直接下载下来打开解决方案就可以用,没想到一编译,出现了奇奇怪怪的Error,部分Error网上也没什么好的解决办法,对我这个从未深 ...
- AbstractFactory(抽象工厂模式)
AbstractFactory(抽象工厂模式) 有些情况下我们需要根据不同的选择逻辑提供不同的构造工厂,而对于多个工厂而言需要一个统一的抽象 <?php class Config { publi ...
- linux实时查看更新日志命令
很多时候在调试生成或正式平台服务器的时候想查看实时的日志输出,在Linux中可以使用tail 或 watch来实现. 比如我们项目中有个 app.log 的日志文件,我们普通读取都使用 vi app. ...
- 【LeetCode】Count and Say(报数)
这道题是LeetCode里的第38道题. 题目要求: 报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111 ...
- spring工作机制及为什么要用?
spring工作机制及为什么要用?1.spring mvc请所有的请求都提交给DispatcherServlet,它会委托应用系统的其他模块负责对请求进行真正的处理工作.2.DispatcherSer ...
- POJ 3585 Accumulation Degree
二次扫描与换根法 用于解决无根树,对于每一个节点作为根时都要统计 做法: 1.先以任意一个节点为根,做树形DP,保存每个节点的DP值 2.然后自上而下dfs,对于每个节点考虑以他为根的最大值 #inc ...
- virtualbox中centos虚拟机网络配置
本文讲述的是如何在Oracle VM VirtualBox安装的CentOS虚拟机中进行网络配置,使得虚拟机可以访问宿主主机,也能访问外网,宿主主机可以访问虚拟机,虚拟机之间也可以相互访问. 在Vir ...
- 关于整合spring+mybatis 第二种方式
和第一种方式一样的步骤,不过bean.xml中有些许差异 <!-- 配置sqlSessionFactory --> <bean id="sqlSessionFactory& ...