markdown-itのアンカー記法プラグインをブラウザで使う方法

webpackを使う。

開発環境

• Raspberry Pi 3 Model B
  • Raspbian GNU/Linux 8.0 (jessie)
  • uname -a: Linux raspberrypi 4.4.26-v7+ #915 SMP Thu Oct 20 17:08:44 BST 2016 armv7l GNU/Linux
• Node.js 9.4.0
  • npm 5.6.0
    • npmモジュール
      • n
      • jquery
        • markdown-it
          • markdown-it-ruby
          • markdown-it-anchor

前回まで

• ラズパイ3に最新Node.jsをインストールする
• npmでインストールする方法
• markdown-itのルビ記法プラグインをブラウザで使う方法

ここまでは完了済みとする。

前提

• インストール済み
  • Node.js, npm
  • npmモジュール: n, webpack, jquery, markdown-it
• npmローカルパッケージ作成済み ($ npm init)

手順

カレントディレクトリを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を開く。

冒頭のリンクをクリックすると、各見出しへスクロールする。成功！