元記事
Markdown非対応のテキストエディタでも対応しているように使える、MarkdownテキストをHTMLに埋め込み、ブラウザでプレビューする方法 - Qiita
先の記事では、いろいろ頑張ったのですが、使い勝手がいまいちでした。
今回はより実用的です。
Markdown のために、エディタを乗り換える必要がなくなりました。
自分の好きなエディタがどんなものでも、GoogleChrome とかが Markdownプレビューウィンドウになってくれます。
参考記事
javascript のコード中に Markdown をヒアドキュメント風に直書きする方法 - Qiita
こちらのコメント欄のテクニックを利用させてもらいました。
Markdown対応エディタ
Qiitaとか、redmineで記事投稿するときに、Markdown使います。
テキストエディタで入力はできるものの、やはり、Markdown表示プレビュー機能がほしいものです。
そういう機能があるのは、VisualStudioCode とか、Atomとか、kobitoでしょうか。
しかし、そのために普段使いのエディタを切り替えるのは、なんだかなー、という気分になります。
使い慣れたエディタならば、スニペットとか連続置換とかブックマークとか、マーカーとか、アウトラインとか、ミニマップとか、あれこれ、あって使いやすいです。
ショートカットキーも覚え直す必要もない。テキストエディタには、ゆずれない何かがあるかもしれません。
なので、みなさんがお使いのエディタの操作性はそのままに、
マークダウンプレビュー機能をエディタとは独立させました。全てのエディタを、Markdownプレビュー機能対応させます。
Chromeで動作確認したけど、Firefoxとかでも動くんじゃないかな。
機能概要
index.html に、scriptとして、index.md をリンクさせて、
index.mdには、JavaScriptのテンプレートリテラルで書いて、JavaScriptの複数行文字として認識させています。
これで、外部テキストファイルとして、markdownファイルをブラウザに取り込んでいます。
拡張子が.md だけど、Chromeでは、JavaScriptファイルとして認識してくれたみたいです。
htmlファイルに、Markdown表示と変換の仕組みをいれた。
Markdownのテキスト>>HTML変換には、いつもおなじみ marked.jsです。
chjj/marked: A markdown parser and compiler. Built for speed.
ダウンロードして相対パスに配置するなり、絶対パスでみるなり、CDN使ってリンクしたりしてください。
あと、リロードもするようにしました。0.5秒毎に。好きなリロード時間を自分で決めて設定してください。
<html lang="ja">
<head>
<meta charset="UTF-8">
<!--相対パス指定-->
<!--<script src="./marked.js/marked.min.js"></script>-->
<!--絶対パス指定-->
<!--<script src="file:///c:/.../.../.../marked.js/marked.min.js"></script>-->
<!--CDN指定-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="index.md"></script>
<script>
(function () {
var main = function () {
document.body.innerHTML =
marked(doc);
};
var timer;
window.addEventListener("DOMContentLoaded",function(){
main();
timer = setInterval('location.reload()',500);
},false);
}());
</script>
</head>
<body>
</body>
</html>
文章は index.md ファイルを編集する
テキスト側は、次のように書きます。
先頭行： var doc = `
間の行： Markdownで文章を書く
最終行： `;
JavaScriptのテンプレートリテラルを使っています。
これで、GoogleChromeなら読み込まれますし、
Chromeがリロードされても、スクロールバーの位置は変わりませんでしたので、文の下の方でもプレビューが使いにくくなることもないです。
注意点
ちょっと欠点ですが、index.md ファイルの中では、
バッククウォートの文字は、バックスラッシュ+バッククウォートで表現してください。
要望
誰か、こういうのに対応した、Markdown用のかっこいいCSSとか、Markdown内のプログラムソースの、Qiitaみたいな色分けできる maked.jsを超えるのとか、作ってくれないかな。
そういうの、kobitoの中の人とか頑張ってるのかな。
と、思いました。
そんなところです。
追記と改良
このように改良しておくと、バッククウォートの代わりに、^ や ~ を使ってバッククウォートが表現できるので、便利かも。
ということで、ソースを載せておきます。
(function () {
var replaceAll = function(str, before, after) {
return str.split(before).join(after);
};
var main = function () {
document.body.innerHTML =
marked(replaceAll(replaceAll(doc, '^', '`'), '~', '`'));
};
var timer;
window.addEventListener("DOMContentLoaded",function(){
main();
timer = setInterval('location.reload()',500);
},false);
}());
更に追記
Markdownではソースコードを記述するときにバッククウォート3連続にしますが、QiitaのMarkdownではチルダ[~]3連続でも同じように機能します。
追記 2018/05/24
少し改良して GitHubにアップしました。
standard-software/MarkdownPreviewTool: All Editor Add Function Markdown Preview Window
https://github.com/standard-software/MarkdownPreviewTool