ルビ記法とアンカー記法のプラグインを追加する。
開発環境
- Raspberry Pi 3 Model B
前回まで
- ラズパイ3に最新Node.jsをインストールする
- npmでインストールする方法
- markdown-itのルビ記法プラグインをブラウザで使う方法
- markdown-itのアンカー記法プラグインをブラウザで使う方法
上記にて各種セットアップ済みであること。
手順
webpackなどをインストールしたい任意ディレクトリを作成する。
$ mkdir /tmp/任意ディレクトリ
$ cd /tmp/任意ディレクトリ
カレントディレクトリをnpmローカルパッケージとして初期化する。
$ npm init
各種パッケージをインストールする。
$ npm install webpack $ npm install jquery $ npm install markdown-it $ npm install markdown-it-ruby $ npm install markdown-it-anchor
ローカルの.binを環境変数のパスに通す。
export PATH=$PATH:/tmp/任意ディレクトリ/node_modules/.bin
- /tmp/任意ディレクトリ/
- node_modules/
- testcode/
- front.js
- index.html
- webpack.config.js
webpack.config.js
module.exports = { entry: './front.js', output: { filename: './bundle.js' }, devtool: 'source-map', };
front.js
$ = require("jquery") md = require('markdown-it')() .use(require('markdown-it-ruby')) .use(require('markdown-it-anchor'), { // https://qiita.com/satokaz/items/64582da4640898c4bf42 slugify: function (header) { return encodeURI(header.trim() .toLowerCase() .replace(/[\]\[\!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\_\{\|\}\~]/g, '') .replace(/\s+/g, '-')) .replace(/\-+$/, ''); } }) $(".markdown-body").html( md.render( $(".source").text() ) )
index.html
<meta charset="utf-8"> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css"/> <div class=markdown-body></div> <div class=source style="display: none"> # Hello {漢字|かん|じ} 1. [でんでんMarkdownルビ](#でんでんMarkdownルビ) 1. [日本語タイトル2](#日本語タイトル2) 1. [{日本語|に|ほん|ご}ルビ付タイトル3](#日に本ほん語ごルビ付タイトル3) 1. [English title](#english-title) 1. [日本語とEnglish](#日本語とenglish) 1. [English and 日本語](#english-and-日本語) ## でんでんMarkdownルビ [でんでんMarkdown書式におけるルビ記法](https://conv.denshochan.com/markdown#ruby)が使える。 {超電磁砲|レールガン}のような厨ニ病ルビも可。 ああああああああああああ ああああああああああああ ## 日本語タイトル2 ああああああああああああ ああああああああああああ ああああああああああああ ああああああああああああ ## {日本語|に|ほん|ご}ルビ付タイトル3 ああああああああああああ ああああああああああああ ああああああああああああ ああああああああああああ ## English title English title. English title. English title. English title. ## 日本語とEnglish ああああああああああああ ああああああああああああ ああああああああああああ ああああああああああああ ## English and 日本語 ああああああああああああ ああああああああああああ ああああああああああああ ああああああああああああ </div> <script src="bundle.js"></script>
front.jsをbundle.jsに出力する。
$ webpack
Hash: 6d23a2e790698cac8368 Version: webpack 3.10.0 Time: 6285ms Asset Size Chunks Chunk Names ./bundle.js 566 kB 0 [emitted] [big] main ./bundle.js.map 736 kB 0 [emitted] main [12] ./front.js 1.43 kB {0} [built] [66] (webpack)/buildin/module.js 517 bytes {0} [built] [67] (webpack)/buildin/global.js 509 bytes {0} [built] + 74 hidden modules
index.htmlをブラウザで開く。
ルビが表示される。{漢字|かん|じ}が<ruby>のHTMLに動的変換された。そして日本語の見出しはURLエンコードされてhref属性値にセットされる。成功！
