web-dev-qa-db-ja.com

Emacsでリアルタイムでマークダウンをプレビューするにはどうすればよいですか？

私はspacemacsを使用しており、リアルタイムでマークダウンをプレビューするプラグインを探しています。プラグイン markdown-preview-eww を見つけましたが、gemが必要であるため、Rubyをインストールしないことを好みます。

markdown-mode はmdをhtmlにエクスポートするだけで、リアルタイムでマークダウンをプレビューできません。また、同意なしにファイルを生成するのは好きではありません。

だから、emacsでマークダウンをプレビューするプラグインはありますか？または、誰もがマークダウンではなくemacsで組織モードを使用していますか？

emacsmarkdown
38
honmaple

ここにいくつかのソリューションがリストされています： http://wikemacs.org/wiki/Markdown#Live_preview_as_you_type 。

それらのうちの2つは追加パッケージを必要とします：Ruby 1つはあなたが言及したもの、またはlivedown-modeの場合はnpm（nodejs、javascript）ライブラリです。

しかし、2つの純粋なElispオプションがあります！最も簡単なものはflymdで、もう1つは impatient-mode と呼ばれます。どちらもMelpaで利用できます。

Flymd

Package.el（M-x package-install RET flymd RET）でインストールし、M-x flymd-flyitを呼び出すだけです。レンダリングされたマークダウンでブラウザーを開きます。

自動リロードとgithubマークダウンフレーバーを有効/無効にすることができます。

せっかちモード

HTMLで動作するように設計されていますが、このドキュメントでは、マークダウンで動作させるためのトリックを提供しています。また、チャームのように機能しますが、1つの構成ステップが必要です。

  • melpa リポジトリを使用するようにpackage.elを設定している場合、M-x package-install RET impatient-mode RETでimpatient-modeをインストールします。
  • M-x httpd-startを使用してemacsのWebサーバーを起動します。
  • ライブプレビューに興味があるバッファでイライラモードを開始します：M-x impatient-mode。
  • ブラウザーを開き、localhost：8080/impを開きます。モードが有効になっているバッファのリストが表示されます。いずれかをクリックします。バッファのライブレンダリングが表示されます。

マークダウン変換を有効にするには、wikemacsに従います。

  • Initファイルのように、このelisp関数をどこかで定義します。

    (defun markdown-html (buffer)
  (princ (with-current-buffer buffer
    (format "<!DOCTYPE html><html><title>Impatient Markdown</title><xmp theme=\"united\" style=\"display:none;\"> %s  </xmp><script src=\"http://strapdownjs.com/v/0.2/strapdown.js\"></script></html>" (buffer-substring-no-properties (point-min) (point-max))))
  (current-buffer)))

  • それを使用するためにせっかちなモードを伝えます：M-x imp-set-user-filter RET markdown-html RET。

  • ブラウザに戻って、動作します！
38
Ehvince

私は this が好きです。別のパッケージもブラウザも必要としない、よりシンプルなアプローチ：

  • 実行M-x markdown-other-window現在のバッファで結果を別のウィンドウに表示します。

  • への変更 M-x html-modeおよびHTMLタグを非表示M-x sgml-tags-invisible。

次に、HTMLバッファーを更新するには、もう一度実行しますmarkdown-other-window C-cC-cm マークダウンバッファ上。

5
marcanuy

Spacemacsでmarkdown-live-preview-modeまたはSPC m c pを使用してこれを実行できるようになりました。

2
Jin

私のemacsアプリケーションフレームワークを使用できます： https://github.com/manateelazycat/emacs-application-framework

ブラウザをemacsに埋め込み、左側でマークダウンを記述し、右側で更新をプレビューできます。

スクリーンショット： https://github.com/manateelazycat/emacs-application-framework/blob/master/screenshot/markdown_previewer.gif

Eafのインストール方法を確認してください https://github.com/manateelazycat/emacs-application-framework/blob/master/README.md

2
ManateeLazyCat

grip-mode ：Github風味のインスタントMarkdown/Orgプレビューをお勧めします。

0
seagle0128

@Ehvinceの答えは、Github.comとまったく同じビューを提供するためにmarkdown-html関数を少し変更することに私を刺激しました。

(defun markdown-html (buffer)
  (princ (with-current-buffer buffer
           (format "<!DOCTYPE html><html><script src=\"https://cdnjs.cloudflare.com/ajax/libs/he/1.1.1/he.js\"></script><link rel=\"stylesheet\" href=\"https://assets-cdn.github.com/assets/github-e6bb18b320358b77abe040d2eb46b547.css\"><link rel=\"stylesheet\" href=\"https://assets-cdn.github.com/assets/frameworks-95aff0b550d3fe338b645a4deebdcb1b.css\"><title>Impatient Markdown</title><div id=\"markdown-content\" style=\"display:none\">%s</div><div class=\"markdown-body\" style=\"max-width:968px;margin:0 auto;\"></div><script>fetch('https://api.github.com/markdown', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ \"text\": document.getElementById('markdown-content').innerHTML, \"mode\": \"gfm\", \"context\": \"knit-pk/homepage-nuxtjs\"}) }).then(response => response.text()).then(response => {document.querySelector('.markdown-body').innerHTML = he.decode(response)}).then(() => { fetch(\"https://Gist.githubusercontent.com/FieryCod/b6938b29531b6ec72de25c76fa978b2c/raw/\").then(response => response.text()).then(eval)});</script></html>"
                   (buffer-substring-no-properties (point-min) (point-max))))
         (current-buffer)))

せっかちモードを有効にし、imp-user-filterをmarkdown-htmlに自動的に設定する関数。

(defun markdown-preview-like-god ()
  (interactive)
  (impatient-mode 1)
  (setq imp-user-filter #'markdown-html)
  (cl-incf imp-last-state)
  (imp--notify-clients))

使い方：

  1. M-x http-start
  2. .mdバッファ上M-x markdown-preview-like-god
  3. localhost:8080/impに移動します
0
FieryCod