Como posso usar o sabor SE do Markdown no emacs?

17

Eu gostaria de usar o sabor SE da remarcação no meu emacs. O modo Markdown padrão possui alguns recursos (backticks e código de marca de indentação, #cria um cabeçalho e >também altera a fonte), mas eu também gostaria de ter:

  • * para criar um item da lista, incluindo recuo.
  • [foo](http://example.com)para aparecer como foo e abrir um navegador http://example.comquando clicado.

Idealmente, gostaria que isso fosse mostrado no meu emacs como renderizado Markdown. Por exemplo, se eu fosse escrever:

## Header

* item 1
* item 2

         while true; do echo foo; done

End of list and more code

    while true; do echo bar; done

 See [here](http://example.com) for details

Eu gostaria que fosse renderizado assim no próprio emacs:


Cabeçalho

  • item 1
  • item 2

    while true; do echo foo; done
    

Fim da lista e mais código

while true; do echo bar; done

Veja aqui para detalhes


Isso pode ser alcançado e, em caso afirmativo, como?

Terdon
fonte
Sobre o bloco de código que está sendo renderizado: o modo Markdown não destaca os blocos de código para você? O que você estava procurando lá?
Malabarba
Além disso, você deseja que isso seja editável, como um editor WYSIWYG Markdown? Ou é suficiente exibir a saída "compilada" em um buffer separado? O último é bastante simples, o primeiro é um gigante da codificação.
Malabarba 6/10
@ Malabarba, sim, o código está bom. O que eu gostaria é: i) listas com indentação automática; ii) tratamento de URL. Através xdg-openou simplesmente exibindo o endereço de destino quando clicado, mas o texto do link quando não: "Clique aqui " para se tornar Click [here](http://example.com)clicado. Apenas uma maneira rápida de incluir URLs perfeitamente nos meus documentos de texto.
terdon
OK, ambos podem ser alcançados com a fonte-lock-add-keyword. Vou tentar escrever algo amanhã, se ninguém me bater.
Malabarba

Respostas:

19

** EDIT: ** Desde a redação deste documento, parece que parte dos recursos foi implementada diretamente no modo de remarcação. Confira este comentário e os links nele.


Configuração

Existem duas abordagens que você pode adotar.

  1. Você pode escrever um comando que compila o código de remarcação (usando um comando shell) e exibe o html em um buffer.
  2. Você pode fazer algumas personalizações no modo organizacional para fazer com que o buffer pareça uma redução renderizada.

Eu explico aqui como implementar o número 2. Simplesmente copie todo o código abaixo para seu arquivo init.

Adicione as regras de bloqueio de fonte

Essa variável controla como você deseja que as listas sejam exibidas. Ele adiciona algum espaço para recuar a lista e usa um belo marcador (se sua fonte puder exibi-la).

(defvar endless/bullet-appearance
  (propertize (if (char-displayable-p ?•) "  •" "  *")
              'face 'markdown-list-face)
  "String to be displayed as the bullet of markdown list items.")

Este é o comando que realmente adiciona as regras. Há um para listas e outro para links.

(require 'rx)
(defvar endless/markdown-link-regexp
    "\\[\\(?1:[^]]+\\)]\\(?:(\\(?2:[^)]+\\))\\|\\[\\(?3:[^]]+\\)]\\)"
  "Regexp matching a markdown link.")

(font-lock-add-keywords
 'markdown-mode
 '(("^ *\\(\\*\\|\\+\\|-\\|\\) "
    1 `(face nil display ,endless/bullet-appearance) prepend)
   (endless/markdown-link-regexp
    1 '(face nil display "") prepend))
 'append)

Torne o link editável

Como estamos usando a displaypropriedade para ocultar parte do link, precisamos informar ao bloqueio de fonte que ela deve apagar essa propriedade sempre que você excluir parte do link (para que ainda possamos editá-lo).

(add-hook 'markdown-mode-hook #'endless/markdown-font-lock)

(defun endless/markdown-font-lock ()
  "Configure aggressive font-locking of `markdown-mode'."
  (define-key markdown-mode-map "\C-c\C-l" #'endless/markdown-insert-link)
  (add-to-list (make-local-variable 'font-lock-extra-managed-props) 'display))

Também podemos definir um comando para editá-lo facilmente, vinculado a C-c C-l, como no modo organizacional.

(defun endless/markdown-insert-link ()
  "Insert or edit link at point."
  (interactive)
  (if (or (looking-at endless/markdown-link-regexp)
          (and (ignore-errors (backward-up-list) t)
               (or (looking-at endless/markdown-link-regexp)
                   (and (forward-sexp -1)
                        (looking-at endless/markdown-link-regexp)))))
      (let ((data (endless/ask-for-link
                   (match-string-no-properties 1) 
                   (or (match-string-no-properties 2)
                       (match-string-no-properties 3)))))
        (if (match-string-no-properties 2)
            (replace-match (cdr data) :fixedcase :literal nil 2)
          (replace-match (cdr data) :fixedcase :literal nil 3))
        (replace-match (car data) :fixedcase :literal nil 1))
    (let ((data (endless/ask-for-link)))
      (insert "[" (car data) "](" (cdr data) ")"))))

(defun endless/ask-for-link (&optional name link)
  (cons (read-string "Text of the link: " name)
        (read-string "URL of the link: " link)))

(Opcional) Configure algumas faces

Isso deve ser suficiente para os pontos solicitados. Se você deseja que seu buffer se pareça ainda mais com a redução SE, chame

M-x customize-group RET markdown-faces

e mude o que achar melhor. Eu fiz algumas configurações, e aqui está o que eu tenho.

(custom-set-faces
 '(markdown-header-face-1 ((t (:inherit markdown-header-face :height 2.0))))
 '(markdown-header-face-2 ((t (:inherit markdown-header-face :height 1.7))))
 '(markdown-header-face-3 ((t (:inherit markdown-header-face :height 1.4))))
 '(markdown-header-face-4 ((t (:inherit markdown-header-face :height 1.1))))
 '(markdown-inline-code-face ((t (:inherit font-lock-constant-face :background "gainsboro"))))
 '(markdown-link-face ((t (:inherit link))))
 '(markdown-pre-face ((t (:inherit font-lock-constant-face :background "gainsboro")))))

Resultados

Aqui está o que você obterá após os 2 primeiros conjuntos de configurações:
insira a descrição da imagem aqui

Aqui está o que você obterá depois de configurar os rostos também. É discutível se isso parece melhor, eu pessoalmente vou ficar com o acima.
insira a descrição da imagem aqui

Malabarba
fonte
Uau! Isso é quase perfeito, obrigado. Isso responde a tudo o que eu pedi, mas, para pontos extras de brownie, existe uma maneira de tornar o link mais interativo? Quero dizer, uma maneira fácil de extrair o URL. Seria possível alternar entre [foo]e [foo](http://bar.com)clicando em? Não estou muito preocupado com os detalhes, mas gostaria de exibir o URL facilmente, se desejado. No momento, tenho que excluir um dos colchetes para que apareça. Eu posso viver com isso, mas eu estaria interessado em uma maneira melhor.
terdon
@terdon Done! ..
Malabarba
Vou combinar isso com o Edit com o Emacs , e depois assumirei a Área Tri-State!
Nispio 7/10
@ Malabarba parece haver um erro lá. Eu recebo "Unknown rx form group-n '" . Output of --debug-init` aqui . Alguma idéia?
terdon
@terdon É possível que group-n seja definido apenas em 24.4, tentarei verificar. Você pode tentar substituir cada um group-n X por apenas group. Isso ainda pode funcionar.
Malabarba 7/10
5

Um bom lugar para começar seria o markdown-mode.elque pode ser baixado aqui .

Esse modo não oferece org-modeembelezamento de estilo, mas oferece realce de sintaxe e várias customizeopções.

Para obter esse embelezamento de estilo, alguém precisaria escrever uma extensão no markdown-mode.el implementando fontes-faces.

  • A maioria das faces do org-mode.el é definida em org-faces.el .

  • Além disso, você deve dar uma olhada em como o modo organizacional substitui visualmente o texto por caracteres. Esse código está em org-entity.el . Este é o código que substitui o látex \pmpor ±.

nixeagle
fonte
Obrigado, estou usando o modo de remarcação no momento, como mencionei na minha resposta. Gostaria de saber como implementar os recursos que estão faltando e também como o emacs os exibe como renderizados. Como alternativa, eu gostaria de saber que é impossível exibi-los renderizados, se for esse o caso.
terdon
É possível fazer isso, o modo org faz o embelezamento de sintaxe assim. Dê-me alguns momentos para encontrar o código. Eu fiz codificação semelhante para outro modo principal. Eu não sabia que você já sabia sobre markdown.el.
Nixeagle
Editei a resposta para fornecer uma maneira de começar a fazer o que você deseja. Quando chegar em casa, talvez consiga digitar algum código que faça exatamente o que você deseja. Assim, o modo organizacional modifica os títulos para ocultar os *níveis de denotação e altera o tamanho do título com base na localização do documento. Também é capaz de links de formato bonito.
Nixeagle