Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

自分が使っているテキストエディタで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 のファイルを開いた時だけ、プレビューできるようにしています。

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

kobitoさん

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

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

続き

2018/05/24 追記

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away