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

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

gulpmarkdownの形式で記載したデータを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.jscssファイルを読み込む必要があります。

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

$ npm install --save-dev highlight.js

gulpでmarkedを使う

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

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

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で扱うで説明します。


関連記事

  • 静的サイトジェネレーターを自作してブログ作成システムを作成

    JekyllやHugoなど、魅力的なものはあったのですが、この際勉強を兼ねて静的サイトジェネレーターを自作してみようと思いました。以下、gulpで静的サイトジェネレーターを自作したときの作業メモです。


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

    gulpでmarkdownの形式で記載したデータをhtmlに変換します。本ブログのように技術ブログの場合はコードをシンタックスハイライト(色付け)して表示したいので、highlight.jsもインスト...


  • gulp markdownを変換してnunjucksで扱う

    実際に公開するhtmlファイルの中身はmarkdownから変換したhtmlの内容だけではなく、titleやdescriptionなどのmetaタグやヘッダ、フッタなどの情報が必要です。そのため、mar...


  • gulp nunjucksをコンパイルしてhtmlに変換する

    nunjucksで記載されたテンプレートエンジンをhtmlに変換します。今回はnunjucksのコンパイルにgulp-nunjucks-renderを使用します。特に設定をしなくても正しく動作するので...


  • nunjucks includeで絶対パスを指定する

    nunjucksの便利な機能の1つにincludeがあります。ファイルパスはデフォルトでは相対パスで設定されます。なのでメインとなるnjkファイルのパスによって以下のようになってしまいます。これではフ...


  • gulp lessをcssにコンパイルする

    lessファイルをgulpを使ってcssにコンパイルします。gulp-lessとgulp-autoprefixerをインストールします。gulp-autoprefixerはなくても構いませんが、古いブ...


  • gulp front-matterの内容をdataとして使用する

    ブログの記事を作成するにあたって、titleやdescriptionのメタ情報やカテゴリー、タグなど、ファイルごとに管理する情報はfront-matterの形式で管理すると便利です。front-mat...


  • gulp 引数を受け取って開発時とリリース時で処理を分岐する

    コマンドラインでタスクを実行する際に、以下のようにパラメータを指定して、タスク処理では指定されたパラメータを受け取って処理を分岐するようにします。minimistを使えば上記の形式で指定したパラメータ...


  • gulpをES2015で実装する

    gulpをES2015で実装するための手順です。babelを使うと、ES2015 (ES6)などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に変換できます。


  • Vue.js webpackでHot Module Replacementを行う

    開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ...