search
LoginSignup
13
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

元記事

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
13
Help us understand the problem. What are the problem?