对于程序猿写博客来说,这代码高亮是起码的要求。可是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使代码高亮的更多相关文章

  1. highlight.js 页面 代码高亮

    官网:https://highlightjs.org/ 功能: 支持 155 种编程语言的语法解析:拥有 73 种样式 自动检测编程语言 可以在 node.js 平台上运行 支持各种标签 与任何 js ...

  2. 测试使用highlight.js的代码效果

    ---恢复内容开始--- C#代码 private void NextDateUpdate(DateTime dtt) { dtt.AddDays(); Response.Write("dt ...

  3. IDEA中使用插件添加更多可选择的主题,使代码高亮,缓解视觉疲劳

    1.点击 File-->settings(或Ctrl+Shift+S)打开IDE设置面板 点击plugins-->右侧选择Marketplace-->搜索框中输入Material-- ...

  4. 本地安装node.js模块

    一.需求 单位电脑不让上网,但是需要用到一个node.js模块,elasticdump. 二.解决 1.自己电脑上下载模块: npm install elasticdump -g 注意:必须要加 -g ...

  5. 使用 Google Code Prettify 实现代码高亮

    今天这篇文章主要讲述使用 google-code-prettify 来实现代码的高亮显示,以前我使用 highlight.js 来实现文章中代码的高亮显示. prettify 非常小巧且配置简单,使用 ...

  6. SyntaxHighlighter 代码高亮极简单配置

    页首Html代码: <!--<link type="text/css" rel="stylesheet" href="https://bl ...

  7. 【highlight.js】页面代码高亮插件

    [highlight.js] 很多博客都支持页面插入各种语言的代码,而这些代码肯定是有高亮设置的.那么在我们自己的页面上如何进行代码高亮设置?有现成的这个highlight.js插件我们可以使用. h ...

  8. 用 highlight.js 为文章中的代码添加语法高亮

    来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ --------------- ...

  9. highlight.js 代码高亮插件的使用

    在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下 ...

随机推荐

  1. [转载] Python数据类型知识点全解

    [转载] Python数据类型知识点全解 1.字符串 字符串常用功能 name = 'derek' print(name.capitalize()) #首字母大写 Derek print(name.c ...

  2. python爬虫基础02-urllib库

    Python网络请求urllib和urllib3详解 urllib是Python中请求url连接的官方标准库,在Python2中主要为urllib和urllib2,在Python3中整合成了urlli ...

  3. 微信小程序登录对接Django后端实现JWT方式验证登录

    先上效果图 点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料. 流程 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3. ...

  4. 数据结构( Pyhon 语言描述 ) — — 第7章:栈

    栈概览 栈是线性集合,遵从后进先出原则( Last - in first - out , LIFO )原则 栈常用的操作包括压入( push ) 和弹出( pop ) 栈的应用 将中缀表达式转换为后缀 ...

  5. 我的Python分析成长之路4

    一.函数 1.什么是函数?:函数是带名字的代码块,调用函数,只要调用函数名就可以.    2.函数的性质:1.减少重复代码 2.使程序变得可扩展 3.使程序变得易维护 3.编程范示: 1.面向对象编程 ...

  6. 算法学习记录-图——最小路径之Floyd算法

    floyd算法: 解决任意两点间的最短路径的一种算法,可以正确处理有向图或负权的最短路径问题,同时也被用于计算有向图的传递闭包. 设为从到的只以集合中的节点为中间节点的最短路径的长度. 若最短路径经过 ...

  7. Matplotlib基本图形之直方图

    Matplotlib基本图形之直方图 直方图特点 由一系列高度不等的纵向条形组成,表示数据分布情况例如年级同学身高分布注意与条形图的区别 示例代码: import osimport numpy as ...

  8. Mac 生成public_key

    1.首先查看是否已经生成过public_key 打开终端查看是否已经存在SSH密钥:cd ~/.ssh 输出:No such file or directory表示没有 2.生成public_key ...

  9. python---类接口技术

    类接口技术 扩展只是一种同超类接口的方式.下面所展示的sPecial'ze.Py文件定义了多个类,示范了一些常用技巧.Super 定义一个method函数以及一个delegate函数.Inherito ...

  10. [uiautomator篇] 基类

      package com.softwinner.performance.benchmark; /** * UiAssistant public class * @author liuzhipeng ...