自分が使っているテキストエディタでMarkdown形式のテキストを書きつつ、ブラウザでプレビューしたかったのでこのファイルを作りました。

「そろそろExcelで資料作るのやめたい - Qiita」
「完全に単一のHTMLファイルで動作するMarkdownエディタ作った - Qiita」
これらの記事をまねて、JavaScriptでヒアドキュメントや、marked.min.js 使いました。

シンプルなものにしています。リンク元のような画像埋め込みなどはありません。

RedmineとかQiitaとか、Markdown対応のサービスがあると思いますが、そういうところに投稿する前の試し書きなどに、Markdown表示対応していないエディタでもMarkdown表示プレビューができる感じに使えます。

HTML内部のテキストを編集してブラウザで表示するとマークダウンで表示されます。

index.md.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>

    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="file:///c:/MarkdownTool/bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>   -->
    <script src="file:///c:/MarkdownTool/marked.js/marked.min.js"></script>

<script>
'use strict';

(function () {
var markdownText = (function () {/*/

<!--- ----------------------------------------
マークダウン開始
----------------------------------------- --->

# h1
## h2
### h3
#### h4
##### h5
###### h6


<!--- ----------------------------------------
マークダウン終了
----------------------------------------------
・JavaScriptを使用しているため、上記のマークダウンでは次の制限があります
  ・[*]の前後に[/]が付く表現は誤動作するので
    [%*][*%][%*%]として表現してください。
    (実際には後方にスラッシュが付くもので誤動作しますが
    何にせよ[*]と[/]の組み合わせは使わない方がよいです)
  ・script終了タグを記入すると誤動作するので
    [<%script>]と表現してください。
----------------------------------------- --->

/*/}).toString();

  markdownText = markdownText.split('/*/')[1];

  var replaceAll = function(str, before, after) {
    var result = str
    do {
      str = result;
      result = str.replace(before, after);
    } while (str !== result);
      return result;
  };

  markdownText = replaceAll(markdownText, '%*', '/*');
  markdownText = replaceAll(markdownText, '*%', '*%');
  markdownText = replaceAll(markdownText, '%script', '/script');

  markdownText = marked(markdownText);

  window.onload = function(){
      document.body.innerHTML += markdownText;
  };
}())

</script>
  </head>
  <body>
  </body>
</html>

ローカルの C:\MarkdownTool 以下に marked.js と bootstrap を配置してパス指定しています。
パス指定方法がWindowsですが、そこを変えればMacでも同じく動くはずです。
もちろん CDN で URL から取得していれば Mac Win 変わらないです。

bootstrapはなくても動きますが、marked.js はないと動きません。
もう少しかっこいいCSSを教えてください。
Markdown表示のブラウザ部分が左余白なさすぎです(Bootstrapのせいですわ)
自分はCSSさっぱりわからないので、修正できませんでした。
もっと左余白をあける方法教えてください。

最近のJavaScriptっぽく、グローバル汚染をしないように即時実行関数で囲みました。

最近のJavaScriptっぽくなく、window.onload を使っていますが、これは、自分の動作させたい環境が EmEditor の WebPreview プラグインを使っていて、このブラウザ部分が非常に古い(レガシー)のものの様子で、

document.addEventListener("DOMContentLoaded"

このようなコードが動かないからです。相当古いIEのエンジン使ってるみたいです。
window.onload なら、レガシー環境でも動作するので、このようにしています。

EmEditorでは、.md.html と WebPreviewプラグインとを関連付けて、.md.html のファイルを開いた時だけ、プレビューできるようにしています。

動作画面もアップしておきます。

kobitoさん

テキスト編集部分を、外部エディタに対応してください！

そしてら、こんな厄介なことを考えなくても便利なの！

続き

2018/05/24 追記

この記事には続きがあります。

全てのテキストエディタに、Markdownプレビュー機能を。 - Qiita
https://qiita.com/standard-software/items/154e4cb5f7e0cd198c82

Markdown非対応のテキストエディタでも対応しているように使える、MarkdownテキストをHTMLに埋め込み、ブラウザでプレビューする方法

kobitoさん

続き