Help us understand the problem. What is going on with this article?

DocPad のシンタックスハイライト用プラグイン

More than 5 years have passed since last update.

ブログとかでソースコードを書くときにシンタックスハイライトができると見ためよろしくすることができる。DocPadにはdocpad-plugin-highlightjs というシンタックスハイライトのプラグインがあるのでその導入について。

インストール

terminal.app を立ち上げ、プロジェクトフォルダ内で下記コマンドを入力すればインストール完了。

$ npm install --save docpad-plugin-highlightjs

node_modules フォルダ内に docpad-plugin-highlightjs が入っているはず。

シンタックスハイライト用CSS

You can preview some of them here. からお好みのシンタックスハイライトを探す。
いい感じのものが見つかったらAvailable stylesheets are here. から目的のcssをとってくる。
それをDocPadのプロジェクトファイル(layoutとかhtmlとか)で下記の用にcssを読み込ませる。

<link rel="stylesheet" href="/css/ir_black.css" />

ソースコード書いてみる

<pre><code> 〜 </code></pre>

という感じで、pre要素・code要素内にソースコードを書く。
例えば

<pre><code>
<p>hogehoge</p>
</code></pre>

とても簡単。一度お試しあれ。

shirokuro331
Product Manager / Director
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away