以下のように書くと、
## Features
- GitHub flavored markdown
- [x] GitHub like checkbox lists
- Table of contents
- Emoji :+1:
- Code highlighting
- Bookmarks manager
## Code Highlighting
\```js:path/to/highlight.js
var lang = 'javascript';
function highlight(lang, code) {
var hljs = require('highlight.js');
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(lang, code).value;
}
return hljs.highlight(code).value;
}
\```
## Tables
| default | left | right | centered |
| --- | :--- | ---: | :---: |
| default aligned | left aligned | right aligned | center aligned |
このようになるFirefoxアドオンを書きました。
機能
- GitHub Flavored Markdown対応
- GitHub風レイアウト
- GitHub風チェックボックスリスト
- TOC(Table Of Contents)対応
- スクロールに応じた目次の自動追従
- 絵文字対応
- コードハイライト機能
- GitHub風のハイライトシンタックス
- ファイル名表示
- ブックマーク機能
- 印刷用表示機能
- ユーザーが嫌にならない程度のアニメーションw
インストール
- こちらから最新のxpiファイルをダウンロード
- ダウンロードしたxpiファイルをFirefoxへドラッグ&ドロップ
- Firefoxを再起動し、閲覧したいMarkdownファイルを開いて下さい
やっていること
- FirefoxのStream監視→Markdownと判定された場合にJSでゴリゴリとブラウザを書き換え
- markedによるMarkdown→HTMLの変換
- highlight.jsによるコードハイライト
- emojioneによる絵文字化対応
- github-markdown-css等を利用したスタイル調整
- Bulmaを利用したレイアウト調整
- TOC(Table Of Contents)の自動抽出
- スクロール時にTOCを自動追従
- Animate.cssを利用したアニメーション装飾
単にオフラインでMarkdownを閲覧する目的であれば、Thint/markdown-viewerがすでにありましたが、以下の不満がありました。
- 絵文字未対応
- TOC未対応
- スタイルがGitHub風ではない
- これ以上メンテンナスされる気配がない
今回はこれらの不満を解決するために、また自社のFirefoxで快適なオフラインMarkdown Viewerとして利用するために作りました。
社内で外部とのネットワークを監視されていると、便利なWebサービスがなかなか利用できなかったりします。Markdownの閲覧に関してもそれにあたりました。
同じような悩みを抱えている方の一助になれば幸いです。
これからFirefoxのアドオンを書こうと思っている方へ
JavaScriptの知識があれば書けますが、通常のブラウザのJavaScriptとは動きが若干異なるので注意が必要です。
また、現在Firefoxのアドオンを書く方法はおよそ3つほどあるようです。
- Web Extensionsを用いた方法
- Add-on SDKを用いた方法
- レガシーな方法
まず第一に、これら3つの方法それぞれが、実装の仕方が違うというのが難しいところです。
そのため、どの開発方法を選ぶのかというのがとても大切になると思います。
1つ目のWeb Extensionsを用いた方法は、現在Firefoxが最も推奨している実装方法ですが、まだ公式のドキュメントもあまり充実していない上に、開発者の人口も少なく、ネット上で参考となる記事を見つけることすら大変な印象を受けました。
2つ目のAdd-on SDKを用いた方法は、jpmという便利なnpmパッケージも用意されていて、今回アドオンを作るにあたってはこちらの方法を採用しました。
jpm initで必要なファイルを用意してくれ、jpm runでアドオンを一時インストールしたFirefoxを開いてくれます。
ただし、この方法と3つ目のレガシーな方法は、どうやらFirefoxでは推奨されない方法であると、Firefoxが公式ドキュメントで解説しています。
FirefoxはWeb Extensionsを用いた開発手法にはやくシフトしたいようですが、多くの開発者が、その開発のしやすさやWeb上のドキュメントの豊富さから、未だにAdd-on SDKを用いた方法を利用している印象を受けます。
Firefoxのアドオン開発の将来は、まだまだ安定するのには時間がかかりそうです。
おわりに
GitHubやQiitaへの投稿の前に、ローカルで綺麗に閲覧する目的等でご利用頂けたら幸いです。
また、バグや改善点等見つけた方は、GitHub Issuesに挙げてくださるととても喜びます。