AsciiDoc と PlantUML で Blog が書きたい

何使う？

• 静的サイトジェネレーターの nodejs 実装の Hexo で試す。

Hexo でブログを作成

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo generate
hexo server

• http://localhost:4000

AsciiDoc 対応

• 基本的にはこちらの記事の通り。ありがとうございます。
  • 参照 hexoとasciidocでブログ構築 | blah blah blah
• AsciiDoc 描画用のプラグイン？をインストール

npm install hexo-renderer-asciidoc --save

hexo clean
hexo new example

• 拡張子のデフォルトとか変えられるのかな。 .md を .adoc に変更して編集。

mv source/_posts/example.md source/_posts/example.adoc
vim source/_posts/example.adoc

• 例えば、こんな AciiDoc。

---
title: example
date: 2019-08-30 21:15:40
tags:
---

= Title

== SubTitle

* abc
** def
*** ghi

[source,js]
----
var express = require('express')
var app = express()

// respond with "hello world" when a GET request is made to the homepage
app.get('/', function (req, res) {
  res.send('hello world')
})
----

hexo generate
hexo server

• http://localhost:4000

テーマの変更

git clone https://github.com/HoverBaum/meilidu-hexo.git themes/meilidu

• _config.yml ファイルの編集

- theme: landscape
+ theme: meilidu

hexo generate
hexo server

PlantUML 対応

npm install --save hexo-filter-plantuml

• モジュール hexo-filter-plantuml の編集
  • ちゃんとやるなら fork して、commit して、 npm publish するのが良い？、今回は簡易に。

vim node_modules/hexo-filter-plantuml/lib/renderer.js

• Markdown 記法によるものだったので、 AsciiDoc 記法を認識し(AsciiDoc 記法から抽出し)、AsciiDoc 記法にて出力されるよう編集。

const plantuml = require('./plantuml');

//var reg = /(\s*)(```) *(puml|plantuml) *\n?([\s\S]+?)\s*(\2)(\n+|$)/g;
var reg = /(\s*)\[(source),(plantuml)\] *\n---- *\n([\s\S]+?)\s*\n(----)(\n+|$)/g;

function ignore(data) {
  var source = data.source;
  var ext = source.substring(source.lastIndexOf('.')).toLowerCase();
  return ['.js', '.css', '.html', '.htm'].indexOf(ext) > -1;
}

exports.before = function (data) {
  if (!ignore(data)) {
    data.content = data.content
      .replace(reg, function (raw, start, startQuote, lang, content, endQuote, end) {
        var compress_content = plantuml.compress(content);
        //return start + '<img src="' + compress_content + '" />' + end;
        return start + 'image::' + compress_content + '[width="640"]';
      });
  }
};

hexo generate
hexo server

• 出た！

まとめ

• 一応できた。hexo 悪くない。
• hexo には気に入った theme が無かった。また、blog engine 探しの旅にでる。
• dark で simple で cool な、テーマが欲しい！(自分の手を動かさずに)