markdown-itのアンカー記法プラグインをブラウザで使う方法
webpackを使う。
開発環境
- Raspberry Pi 3 Model B
- Node.js 9.4.0
- npm 5.6.0
- npmモジュール
- npm 5.6.0
前回まで
ここまでは完了済みとする。
前提
手順
カレントディレクトリをnpmローカルパッケージにする。
$ cd npmローカルパッケージのパス
npmローカルパッケージにmarkdown-it-anchorをインストールする。
$ npm install markdown-it-anchor npm WARN markdonwnit@1.0.0 No description npm WARN markdonwnit@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"}) + markdown-it-anchor@4.0.0 added 2 packages in 16.053s
以下のパスにて3ファイル作る。
- npmローカルパッケージ/
- node_modules/
- webpack.config.js
- front.js
- index.html
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-anchor'), { slugify: function (header) { return encodeURI(header.trim() .toLowerCase() .replace(/[\]\[\!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\_\{\|\}\~]/g, '') .replace(/\s+/g, '-')) // Replace spaces with hyphens .replace(/\-+$/, ''); // Replace trailing hyphen } }) $(".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"> # Anchorテスト 1. [日本語タイトル１](#日本語タイトル１) 1. [日本語タイトル2](#日本語タイトル2) 1. [English title](#english-title) 1. [日本語とEnglish](#日本語とenglish) 1. [English and 日本語](#english-and-日本語) ## 日本語タイトル１ 日本語の見出しでアンカーが作成されるか否かテストする。 見出し`<h1>`のテキストノード値がUTF-8でURLエンコードされて、`<a>`の`href`属性にセットされるはず。 ああああああああああああ ああああああああああああ ## 日本語タイトル2 ああああああああああああ ああああああああああああ ああああああああああああ ああああああああああああ ## English title English title. English title. English title. English title. ## 日本語とEnglish ああああああああああああ ああああああああああああ ああああああああああああ ああああああああああああ ## English and 日本語 ああああああああああああ ああああああああああああ ああああああああああああ ああああああああああああ </div> <script src="bundle.js"></script>
bundle.jsを作成する。
$ webpack
ブラウザでindex.htmlを開く。
冒頭のリンクをクリックすると、各見出しへスクロールする。成功！
