Add CSS when using highlight.js. Fixed #151

This commit is contained in:
Yujie Wen 2015-10-26 15:08:43 +08:00
parent 30ff6a40e6
commit 7695b7b58e
2 changed files with 45 additions and 15 deletions

View File

@ -14,7 +14,7 @@
#+REVEAL_HLEVEL: 2 #+REVEAL_HLEVEL: 2
#+REVEAL_HEAD_PREAMBLE: <meta name="description" content="Org-Reveal Introduction."> #+REVEAL_HEAD_PREAMBLE: <meta name="description" content="Org-Reveal Introduction.">
#+REVEAL_POSTAMBLE: <p> Created by yjwen. </p> #+REVEAL_POSTAMBLE: <p> Created by yjwen. </p>
#+REVEAL_PLUGINS: (highlight markdown notes) #+REVEAL_PLUGINS: (markdown notes)
#+REVEAL_EXTRA_CSS: ./local.css #+REVEAL_EXTRA_CSS: ./local.css
* Reveal.js and Org-Reveal * Reveal.js and Org-Reveal
@ -421,21 +421,39 @@ $ git clone https://github.com/yjwen/org-reveal.git
=org-reveal-history=, =org-reveal-center=, =org-reveal-rolling-links=, =org-reveal-keyboard=, =org-reveal-overview= =org-reveal-history=, =org-reveal-center=, =org-reveal-rolling-links=, =org-reveal-keyboard=, =org-reveal-overview=
For an example, please refer to the heading part of this document. For an example, please refer to the heading part of this document.
** Source Codes ** Highlight Source Code
Org-reveal use Org-Babel to highlight source codes. There are two ways to highlight source code.
1. Use your Emacs theme
2. Use highlight.js
Codes copied from [[http://www.haskell.org/haskellwiki/The_Fibonacci_sequence][Haskell Wiki]].
#+BEGIN_SRC haskell To Use your Emacs theme, please make sure ~htmlize.el~ is
installed. Then no more setup is necessary.
fibs = 0 : 1 : next fibs Below is an example. Codes are copied from [[http://www.haskell.org/haskellwiki/The_Fibonacci_sequence][Haskell Wiki]].
#+BEGIN_SRC haskell
fibs = 0 : 1 : next fibs
where next (a : t@(b:_)) = (a+b) : next t where next (a : t@(b:_)) = (a+b) : next t
#+END_SRC #+END_SRC
If you saw odd indentation, please set variable =org-html-indent= If you saw odd indentation, please set variable =org-html-indent=
to =nil= and export again. to =nil= and export again.
If code is not highlighted, please make sure =htmlize.el= is installed. *** Using highlight.js
You can also use [[http://hightlightjs.org][highlight.js]], by adding ~highlight~ to the Reveal.js
plugin list.
#+BEGIN_SRC org
,#+REVEAL_PLUGINS: (highlight)
#+END_SRC
The default highlighting theme is ~zenburn.css~ brought with
Reveal.js. To use other themes, please specify the CSS file name by
~#+REVEAL_HIGHLIGHT_CSS~ or the variable ~org-reveal-highlight-css~.
The "%r" in the given CSS file name will be replaced by Reveal.js'
URL.
** MathJax ** MathJax
:PROPERTIES: :PROPERTIES:

View File

@ -83,6 +83,7 @@
(:reveal-default-frag-style "REVEAL_DEFAULT_FRAG_STYLE" nil org-reveal-default-frag-style t) (:reveal-default-frag-style "REVEAL_DEFAULT_FRAG_STYLE" nil org-reveal-default-frag-style t)
(:reveal-single-file nil "reveal_single_file" org-reveal-single-file t) (:reveal-single-file nil "reveal_single_file" org-reveal-single-file t)
(:reveal-init-script "REVEAL_INIT_SCRIPT" nil org-reveal-init-script space) (:reveal-init-script "REVEAL_INIT_SCRIPT" nil org-reveal-init-script space)
(:reveal-highlight-css "REVEAL_HIGHLIGHT_CSS" nil org-reveal-highlight-css nil)
) )
:translate-alist :translate-alist
@ -333,6 +334,11 @@ content."
:group 'org-export-reveal :group 'org-export-reveal
:type 'string) :type 'string)
(defcustom org-reveal-highlight-css "%r/lib/css/zenburn.css"
"Hightlight.js CSS file."
:group 'org-export-reveal
:type 'string)
(defcustom org-reveal-note-key-char "n" (defcustom org-reveal-note-key-char "n"
"If not nil, org-reveal-note-key-char's value is registered as "If not nil, org-reveal-note-key-char's value is registered as
the key character to Org-mode's structure completion for the key character to Org-mode's structure completion for
@ -500,7 +506,13 @@ using custom variable `org-reveal-root'."
"<link rel=\"stylesheet\" href=\"" theme-css "\" id=\"theme\"/>\n")) "<link rel=\"stylesheet\" href=\"" theme-css "\" id=\"theme\"/>\n"))
;; extra css ;; extra css
(let ((extra-css (plist-get info :reveal-extra-css))) (let ((extra-css (plist-get info :reveal-extra-css)))
(if extra-css (format "<link rel=\"stylesheet\" href=\"%s\"/>" extra-css) "")) (if (string= extra-css "") ""
(format "<link rel=\"stylesheet\" href=\"%s\"/>\n" extra-css)))
;; Include CSS for highlight.js if necessary
(if (org-reveal--using-highlight.js info)
(format "<link rel=\"stylesheet\" href=\"%s\"/>"
(format-spec (plist-get info :reveal-highlight-css)
`((?r . ,(directory-file-name root-path))))))
;; print-pdf ;; print-pdf
(if in-single-file "" (if in-single-file ""
(format " (format "
@ -871,18 +883,18 @@ holding contextual information."
;; Just return the contents. No "<div>" tags. ;; Just return the contents. No "<div>" tags.
contents) contents)
(defun org-reveal--using-highlight.js (info)
"Check whether highlight.js plugin is enabled."
(memq 'highlight (or (car (read-from-string (plist-get info :reveal-plugins)))
org-reveal-plugins)))
(defun org-reveal-src-block (src-block contents info) (defun org-reveal-src-block (src-block contents info)
"Transcode a SRC-BLOCK element from Org to Reveal. "Transcode a SRC-BLOCK element from Org to Reveal.
CONTENTS holds the contents of the item. INFO is a plist holding CONTENTS holds the contents of the item. INFO is a plist holding
contextual information." contextual information."
(if (org-export-read-attribute :attr_html src-block :textarea) (if (org-export-read-attribute :attr_html src-block :textarea)
(org-html--textarea-block src-block) (org-html--textarea-block src-block)
(let* ((buffer-plugins (plist-get info :reveal-plugins)) (let* ((use-highlight (org-reveal--using-highlight.js info))
(use-highlight (memq 'highlight
(cond
((string= buffer-plugins "") nil)
(buffer-plugins (car (read-from-string buffer-plugins)))
(t org-reveal-plugins))))
(lang (org-element-property :language src-block)) (lang (org-element-property :language src-block))
(caption (org-export-get-caption src-block)) (caption (org-export-get-caption src-block))
(code (if (not use-highlight) (code (if (not use-highlight)