全てのテキストエディタに、Markdownプレビュー機能を追加する

# 元記事

[Markdown非対応のテキストエディタでも対応しているように使える、MarkdownテキストをHTMLに埋め込み、ブラウザでプレビューする方法 - Qiita](
http://qiita.com/standard-software/items/3d2b6f6156869854aebf)

先の記事では、いろいろ頑張ったのですが、使い勝手がいまいちでした。
今回はより実用的です。

Markdown のために、エディタを乗り換える必要がなくなりました。
自分の好きなエディタがどんなものでも、GoogleChrome とかが Markdownプレビューウィンドウになってくれます。

# 参考記事

[javascript のコード中に Markdown をヒアドキュメント風に直書きする方法 - Qiita](http://qiita.com/hidao/items/71213093b4f469340664)

こちらのコメント欄のテクニックを利用させてもらいました。


# 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.](https://github.com/chjj/marked)

ダウンロードして相対パスに配置するなり、絶対パスでみるなり、CDN使ってリンクしたりしてください。

あと、リロードもするようにしました。0.5秒毎に。好きなリロード時間を自分で決めて設定してください。

```HTML:index.html
<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 ファイルを編集する

テキスト側は、次のように書きます。

```Markdown:index.md

先頭行：	var doc = `
間の行：	Markdownで文章を書く
最終行：	`;

```

JavaScriptのテンプレートリテラルを使っています。

これで、GoogleChromeなら読み込まれますし、
Chromeがリロードされても、スクロールバーの位置は変わりませんでしたので、文の下の方でもプレビューが使いにくくなることもないです。

# 注意点

ちょっと欠点ですが、index.md ファイルの中では、
バッククウォートの文字は、バックスラッシュ+バッククウォートで表現してください。

# 要望

誰か、こういうのに対応した、Markdown用のかっこいいCSSとか、Markdown内のプログラムソースの、Qiitaみたいな色分けできる maked.jsを超えるのとか、作ってくれないかな。

そういうの、kobitoの中の人とか頑張ってるのかな。

と、思いました。

そんなところです。

# 追記と改良

このように改良しておくと、バッククウォートの代わりに、^ や ~ を使ってバッククウォートが表現できるので、便利かも。
ということで、ソースを載せておきます。

```JavaScript
(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