Bagaimana saya bisa menggunakan rasa SE dari Markdown di emacs?

17

Saya ingin menggunakan rasa SE dari penurunan harga di emacs saya. Modus Penurunan harga default memiliki beberapa fitur (backticks dan kode tanda indentasi, #membuat header dan >juga mengubah font) tetapi saya juga ingin memiliki:

  • * untuk membuat item daftar, termasuk lekukan.
  • [foo](http://example.com)untuk ditampilkan sebagai foo dan buka browser http://example.comketika diklik.

Idealnya, saya ingin ini ditampilkan di emacs saya sebagai Markdown yang diberikan. Misalnya, jika saya menulis:

## 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

Saya ingin ditampilkan seperti ini di emacs sendiri:


Header

  • barang 1
  • item 2

    while true; do echo foo; done
    

Akhir daftar dan lebih banyak kode

while true; do echo bar; done

Lihat di sini untuk detailnya


Bisakah ini dicapai dan, jika ya, bagaimana?

terdon
sumber
Tentang blok kode yang diberikan: bukankah mode penurunan harga menyoroti blok kode untuk Anda? Apa yang kamu cari disana?
Malabarba
Juga, apakah Anda ingin ini dapat diedit, seperti editor Penurunan WYSIWYG? Atau apakah itu cukup untuk menampilkan output "dikompilasi" dalam buffer terpisah? Yang terakhir ini agak sederhana, yang pertama adalah raksasa pengkodean.
Malabarba
@ Malabarba, ya, kodenya baik-baik saja. Yang saya inginkan adalah saya) daftar indentasi otomatis ii) penanganan url. Baik melalui xdg-openatau bahkan hanya sekadar menampilkan alamat target ketika diklik tetapi teks tautannya saat tidak: "Klik di sini " untuk menjadi Click [here](http://example.com)ketika diklik. Hanya cara cepat untuk memasukkan URL dalam dokumen teks saya dengan mulus.
terdon
OK, maka keduanya bisa dicapai dengan font-lock-add-keyword. Saya akan mencoba menulis sesuatu besok, jika tidak ada yang mengalahkan saya untuk itu.
Malabarba

Jawaban:

19

** EDIT: ** Sejak penulisan ini, tampaknya sebagian fitur telah langsung diimplementasikan dalam mode penurunan harga. Lihat komentar ini , dan tautan di dalamnya.


Konfigurasi

Ada dua pendekatan yang bisa Anda ambil.

  1. Anda dapat menulis perintah yang mengkompilasi kode penurunan harga (menggunakan perintah shell) dan menampilkan html di buffer.
  2. Anda dapat membuat beberapa penyesuaian a-la org-mode untuk membuat buffer terlihat seperti penurunan harga yang diberikan.

Saya jelaskan di sini cara menerapkan nomor 2. Cukup salin semua kode di bawah ini ke file init Anda.

Tambahkan aturan kunci-font

Variabel ini mengontrol tampilan daftar yang Anda inginkan. Ini menambahkan beberapa ruang untuk indentasi daftar, dan menggunakan poin-poin yang cukup (jika font Anda dapat menampilkannya).

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

Ini adalah perintah yang sebenarnya menambahkan aturan. Ada satu untuk daftar dan satu untuk tautan.

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

Jadikan tautannya dapat diedit

Karena kami menggunakan displayproperti untuk menyembunyikan bagian dari tautan, kami perlu memberi tahu font-lock bahwa itu harus menghapus properti itu setiap kali Anda menghapus bagian dari tautan (dengan cara itu kami masih dapat mengeditnya).

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

Kita juga dapat mendefinisikan perintah untuk mengeditnya dengan mudah, terikat C-c C-l, seperti dalam mode-org.

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

(Opsional) Konfigurasikan beberapa wajah

Itu sudah cukup untuk poin yang Anda minta. Jika Anda ingin buffer Anda terlihat lebih seperti penurunan harga SE, hubungi

M-x customize-group RET markdown-faces

dan ubah apa yang Anda inginkan. Saya melakukan beberapa konfigurasi sendiri, dan inilah yang saya dapatkan.

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

Hasil

Inilah yang akan Anda dapatkan setelah 2 konfigurasi pertama:
masukkan deskripsi gambar di sini

Inilah yang akan Anda dapatkan setelah mengonfigurasi wajah juga. Dapat diperdebatkan apakah ini terlihat lebih baik, saya pribadi akan tetap dengan yang di atas.
masukkan deskripsi gambar di sini

Malabarba
sumber
Wow! Itu hampir sempurna, terima kasih. Ini menjawab semua yang saya minta, tetapi untuk poin brownies tambahan, apakah ada cara untuk membuat tautan lebih interaktif? Maksud saya, cara mudah untuk mengekstrak URL. Apakah mungkin untuk beralih antara [foo]dan [foo](http://bar.com)dengan mengklik? Saya tidak terlalu peduli dengan detail tetapi ingin cara mudah menampilkan URL jika diinginkan. Saat ini, saya harus menghapus salah satu tanda kurung agar dapat muncul. Saya bisa hidup dengan itu tetapi saya tertarik dengan cara yang lebih baik.
terdon
@terdon Selesai! ..
Malabarba
Saya akan menggabungkan ini dengan Edit dengan Emacs , dan kemudian saya akan mengambil alih Area Tri-State!
nispio
@ Malabarba sepertinya ada kesalahan di sana. Saya mendapatkan "Unknown rx form grup-n '" . Output of --debug-init` di sini . Ada gagasan?
terdon
@terdon Mungkin group-n hanya didefinisikan dalam 24.4, saya akan mencoba untuk memeriksa. Anda dapat mencoba mengganti masing-masing group-n X hanya dengan group. Itu mungkin masih bekerja.
Malabarba
5

Tempat yang baik untuk memulai adalah markdown-mode.elyang dapat diunduh dari sini .

Mode ini tidak menawarkan org-modekeindahan gaya, tetapi menawarkan sintaksis dan sejumlah customizeopsi.

Untuk mendapatkan keindahan gaya ini, seseorang perlu menulis ekstensi ke markdown-mode.el yang mengimplementasikan font-faces.

  • Sebagian besar wajah org-mode.el didefinisikan dalam org-faces.el .

  • Selain itu Anda akan ingin melihat bagaimana mode org menggantikan teks dengan karakter. Kode itu ada di org-entitas.el . Ini adalah kode yang menggantikan lateks \pmdengan ±.

nixeagle
sumber
Terima kasih, saya menggunakan mode penurunan harga saat ini, seperti yang saya sebutkan dalam jawaban saya. Saya ingin tahu bagaimana mengimplementasikan fitur-fitur yang hilang dan juga bagaimana emacs menampilkannya sebagai yang diberikan. Atau, saya ingin tahu bahwa tidak mungkin untuk menampilkannya jika memang demikian.
terdon
Dimungkinkan untuk melakukannya, mode-org melakukan sintaksis kecantikan seperti itu. Beri saya beberapa saat untuk menemukan kode. Saya telah melakukan pengkodean serupa untuk mode-mayor lainnya. Saya tidak menyadari bahwa Anda sudah tahu tentang markdown.el.
nixeagle
Saya telah mengedit jawaban untuk memberikan cara untuk mulai melakukan apa yang Anda inginkan. Ketika saya sampai di rumah, saya mungkin dapat menggedor beberapa kode yang melakukan apa yang Anda inginkan. Sebagaimana adanya, mode-org memodifikasi judul untuk menyembunyikan *level yang menunjukkan dan mengubah ukuran judul berdasarkan di mana ia berada dalam dokumen. Ini juga mampu memformat tautan.
nixeagle