Skip to content

Instantly share code, notes, and snippets.

@fuxialexander

fuxialexander/katex.el

Last active April 12, 2018 17:03
Show Gist options
  • Save fuxialexander/85e47764db5be1d4a57706c7bef0939d to your computer and use it in GitHub Desktop.
Save fuxialexander/85e47764db5be1d4a57706c7bef0939d to your computer and use it in GitHub Desktop.
Download ZIP
Instant latex preview in org mode
Raw
katex.el
;; (org-inside-LaTeX-fragment-p)
(require 'xwidget)
(defvar katex-url "file:///PATH/TO/katex.html?")
(defvar katex-buffer nil)
(defvar katex-xw nil)
(setq katex-buffer (get-buffer-create "*xwidget webkit: Katex *"))
(defun org-katex-latex-fragment-maybe (&optional arg)
"TODO"
(if (org-inside-LaTeX-fragment-p)
(call-interactively #'org-katex-latex-fragment)))
(add-hook 'post-self-insert-hook #'org-katex-latex-fragment-maybe)
(add-hook! 'evil-insert-state-exit-hook (posframe-hide katex-buffer))
(defun org-katex-latex-fragment (&optional arg)
"TODO"
(interactive "P")
(let (beg end)
(let ((datum (org-element-context)))
(when (memq (org-element-type datum)
'(latex-environment latex-fragment))
(setq beg (org-element-property :begin datum))
(setq end (org-element-property :end datum)))
(org-format-katex beg end))))
(defun org-format-katex (beg end)
"TODO"
(save-excursion
(goto-char beg)
(let* ((context (org-element-context))
(type (org-element-type context)))
(when (memq type '(latex-environment latex-fragment))
(let ((value (org-element-property :value context))
(beg (org-element-property :begin context))
(end (save-excursion
(goto-char (org-element-property :end context))
(skip-chars-backward " \r\t\n")
(point))))
(goto-char end)
;; (concat katex-url (url-hexify-string value))
(if (eq type 'latex-fragment)
(setq value (substring value 2 -2)))
(if (eq type 'latex-environment)
(progn
(setq value (replace-regexp-in-string "begin{equation}\\|begin{align}\\|begin{align\\*}" "begin{aligned}" value))
(setq value (replace-regexp-in-string "end{equation}\\|end{align}\\|end{align\\*}" "end{aligned}" value))))
(posframe-show
katex-buffer
:position (point)
:width 40
:height 10
:min-width 40
:min-height 10)
;; (if (string-match ""))
(with-current-buffer katex-buffer
(let ((url (concat katex-url (url-hexify-string value))))
(if katex-xw
(xwidget-webkit-goto-uri katex-xw url)
(insert url)
(put-text-property 1 (+ 1 (length url)) 'invisible t)
(setq katex-xw (xwidget-insert 1 'webkit "katex" 1 1))
(xwidget-put katex-xw 'callback 'xwidget-webkit-callback)
(setq cursor-type nil)
(xwidget-webkit-goto-uri katex-xw url)))))))))
Raw
katex.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Katex</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-TEMocfGvRuD1rIAacqrknm5BQZ7W7uWitoih+jMNFXQIbNl16bO8OZmylH/Vi/Ei" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-jmxIlussZWB7qCuB+PgKG1uLjjxbVVIayPJwi6cG6Zb4YKq0JIw+OMnkkEC7kYCq" crossorigin="anonymous"></script>
<style type="text/css" media="screen">
#math {
position: absolute;
left: 5%;
top: 2%;
}
body {
background: #ECEFF4;
}
</style>
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<span id="math"> </span>
<script>
katex.render(decodeURIComponent(window.location.href.split("?")[1]), math);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment