zukucode
主にWEB関連の情報を技術メモとして発信しています。
gulp

gulp markdownの内容をhtmlに変換する

gulpでmarkdownの形式で記載したデータをhtmlに変換します。

必要なパッケージをインストール

以下のパッケージをインストールします。

$ npm install --save-dev marked

gulp front-matterの内容をdataとして使用するで扱ったように、タスク処理でmarkdownのデータを扱うためにgulp-dataもインストールします。

$ npm install --save-dev gulp-data

highlight.jsでシンタックスハイライト

さらに、本ブログのように技術ブログの場合はコードをシンタックスハイライト（色付け）して表示したいので、highlight.jsもインストールします。

highlight.jsを使ってコードに対して色付けのクラスを付与されますが、そのクラスに色付けするにはhighlight.jsのcssファイルを読み込む必要があります。

詳細はhighlight.jsの公式サイトにてご確認ください。

$ npm install --save-dev highlight.js

gulpでmarkedを使う

タスク処理の流れの中で以下のように実装します。

gulpをES2015で実装するで紹介したように、gulpfileはES2015の記法で実装しています。

gulpfile.babel.js
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import marked from 'marked';
import hljs from 'highlight.js';

const $ = gulpLoadPlugins();

// task処理一部抜粋
.pipe($.data((file) => {
  // html形式に変換したデータを返します
  return marked(String(file.contents), {
    highlight: (code, lang, callback) => hljs.highlight(lang, code).value
  });
}))

上記の場合はhtmlに変換されたデータは出力ファイルとして扱うのではなくdataとして次のタスクに渡しています。

その理由はgulp markdownを変換してnunjucksで扱うで説明します。

gulp

関連記事