技術系サイトでは標準的なヤツら。これを<code src="/path/">でできるようにした。
成果物
コード
<link rel="stylesheet" type="text/css" href="https://ytyaru.github.io/JS.Webpack.Library.Code.SyntaxHighlight.20210201123126/styles/highlight/default.css"> <script src="https://ytyaru.github.io/JS.Webpack.Library.Code.SyntaxHighlight.20210201123126/dist/CodeTag.js"></script>
<script>
window.addEventListener('load', (event) => {
CodeTag.parse();
});
</script>
<pre><code src="https://raw.githubusercontent.com/ytyaru/JS.Webpack.Library.Code.SyntaxHighlight.20210201123126/master/docs/code/0.js"></code></pre> <pre><code src="https://raw.githubusercontent.com/ytyaru/JS.Webpack.Library.Code.SyntaxHighlight.20210201123126/master/docs/code/1.html"></code></pre>
デモ
このブログでやってみた。15秒くらい待っていると表示される。遅い。あとボタンが表示されない。CSSのせいかな？
画像は以下。
機能
- 外部参照
- 構文ハイライト
- コピー
- コード全文
- パス
<code>のsrc属性値<code>のpath属性値${file}: ファイル名${name}: ファイル名から拡張子を省いたもの${ext}: ファイルの拡張子
ライブラリ
- fetch API
- highlight.js
- clipboard.js
Clipboard API があるらしいが、私の環境では使えなかった。なのでclipboard.jsライブラリを使った。
ハマったこと
ClipboardJS
取り込み方法が異なる。ローカルで使ったときはimportせずnew ClipboardJS('.btn')のように使った。なのにnpmだとimport Clipboard from 'clipboard'してからconst clipboard = new Clipboard('.btn');のようにして使う。
GitHubPagesにアップしたらバグった
デプロイで謎エラー
リポジトリを作ったらGitHubPagesをつくる。settingでdocs/にしてsaveボタンを押す。すると以下のようなエラーが出た。
balanced-match の README にある {{1}} の{ が正しく閉じられていません
わけがわからん。ただ、node_moduleをまるごとアップしてしまったのがダメっぽい。こいつらはビルドするときに必要なのであって、ビルド後は不要。なので余計なファイルを削除することで解決した。
URL切れになった
Highligh.jsのCSSを参照しようとしたら、なぜかできなかった。
./docs/node_modules/highlight.js/styles/default.css
以下のようにすると参照できた。謎。
./styles/default.css
所感
めっちゃ疲れた。思いもよらない謎エラーに苦しめられた。JS開発には以下の段階を経る必要がある。そのたびに鬼門がある。
- ローカルでES Moduleを使わず開発する（鯖立てずにCORSエラー回避）
- ローカルサーバを立ち上げて開発する（ES Module, fetch API などを使うが、鯖によりCORSエラー回避）
- webpackで1ファイル化する（ビルド設定（webpack, babel）、
import構文修正） - デプロイ（githubで謎エラー）
次回まとめる。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux
