web-dev-qa-db-fra.com

Comment prévisualiser un markdown dans Emacs en temps réel?

J'utilise spacemacs et je recherche un plugin pour prévisualiser le démarquage en temps réel. J'ai trouvé un plugin markdown-preview-eww , mais il nécessite un bijou et je préfère ne pas installer Ruby.

Le markdown-mode just exporte md au format HTML et ne peut pas prévisualiser le démarquage en temps réel. De plus, je n'aime pas générer de fichier sans mon accord.

Alors, y a-t-il un plugin pour prévisualiser le démarquage dans emacs? Ou est-ce que tout le monde utilise le mode org dans emacs plutôt que markdown?

emacsmarkdown
31
honmaple

Quelques solutions sont répertoriées ici: http://wikemacs.org/wiki/Markdown#Live_preview_as_you_type .

Deux d'entre eux nécessitent des packages supplémentaires: celui de Ruby que vous avez mentionné ou une bibliothèque npm (nodejs, javascript) dans le cas de livedown-mode.

Il y a cependant deux options pures d'Elisp! Le plus simple est flymd et l'autre s'appelle impatient-mode . Les deux sont disponibles dans Melpa. 

Flymd

Installez-le avec package.el (M-x package-install RET flymd RET), puis appelez simplement M-x flymd-flyit. Il ouvre le navigateur avec le markdown rendu.

Nous pouvons activer/désactiver le type de rechargement automatique et github markdown.

Mode impatient

Il est conçu pour fonctionner avec le langage HTML, mais la doc donne un truc pour le faire fonctionner avec markdown. Cela fonctionne aussi comme un charme mais nécessite une étape de configuration:

  • Installez impatient-mode avec M-x package-install RET impatient-mode RET, étant donné que vous avez configuré package.el pour utiliser le répertoire melpa .
  • Démarrez un serveur Web emacs avec M-x httpd-start.
  • Démarrez le mode impatient dans les tampons qui vous intéressent pour prévisualiser en direct: M-x impatient-mode.
  • Ouvrez votre navigateur pour localhost: 8080/imp. Vous verrez la liste des tampons avec le mode activé. Cliquez sur l'un: vous voyez le rendu en direct du tampon.

Pour activer la conversion de démarques, nous suivons wikemacs:

  • Définissez cette fonction elisp quelque part, comme dans votre fichier init:

    (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)))

  • Dites au mode impatient de l'utiliser: M-x imp-set-user-filter RET markdown-html RET.

  • Retournez sur votre navigateur, ça marche!
29
Ehvince

Мне нравится это более простой подход, который не требует ни другого пакета, ни брауза,

  • Nom de code M-x markdown-other-window в текущем буфере и отобразите результат в другом окне.

  • Liste de paramètres M-x html-mode et скройте HTML-теги M-x sgml-tags-invisible.

Затем, чтобы обновить HTML-буфер, запустите снова markdown-other-windowC-cC-cmбуфере уценки.

5
marcanuy

Vous pouvez utiliser mon framework d’application emacs: https://github.com/manateelazycat/emacs-application-framework

C'est un navigateur intégré dans votre emacs, alors vous pouvez écrire un démarquage à gauche et un aperçu de la mise à jour à droite.

Capture d'écran sur: https://github.com/manateelazycat/emacs-application-framework/blob/master/screenshot/markdown_previewer.gif

Comment installer eaf s'il vous plaît regardez https://github.com/manateelazycat/emacs-application-framework/blob/master/README.md

2
ManateeLazyCat

Vous pouvez maintenant le faire dans Spacemacs avec markdown-live-preview-mode ou SPC m c p.

0
Jin

La réponse de @ Ehvince m'a inspiré un peu de changer la fonction markdown-html pour fournir exactement la même vue que dans Github.com.

(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)))

Fonction qui active le mode d'impatience et définit automatiquement le imp-user-filter sur 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))

Comment utiliser:

  1. M-x http-start
  2. Sur le tampon .md M-x markdown-preview-like-god
  3. Aller au localhost:8080/imp
0
FieryCod