元記事

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秒毎に。好きなリロード時間を自分で決めて設定してください。

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 ファイルを編集する

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

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

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

元記事