Sign in
ghost

Add syntax highlight to Ghost

Lorentzca

• 1 min read
Add syntax highlight to Ghost

ghostでシンタックスハイライトさせる

Prismを使う。テーマとハイライトしたい言語を選択して、ダウンロードボタンでprism.jsとprism.cssをダウンロード

それぞれghost/content/themes/casper/assets/js/、ghost/content/themes/casper/assets/css/以下に設置

パーミッションも他のファイルと合わせておく(0666)

ghost/content/themes/casper/default.hbsを編集

<head>内に以下を追記

    {{! The main JavaScript file for Casper }}
    <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

    {{! Styles'n'Scripts }}
    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Open+Sans:700,400" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

ghostを再起動する

以下のようにして言語を指定するとハイライトされる (記事編集中のプレビューでは反映されない)

 ```language-ruby
 puts 'hello'


ハイライトされるのも嬉しいけど、個人的には長い行が折り返されず、スクロールするようになったが嬉しい！

Sign up for more like this.

Enter your email
Subscribe