better syntax highlighting for elixir code

assets/js/app.js

@@ -7,6 +7,7 @@ import hljs from 'highlight.js/build/highlight.pack'
 import {initialize as initEvents} from './events'
 import {initialize as initSidebar} from './sidebar'
 import {initialize as initNightMode} from './night'
+import {initialize as initMakeup} from './makeup'
 
 window.$ = $
 
@@ -20,5 +21,6 @@ $(() => {
   initNightMode()
   initSidebar()
   initEvents()
+  initMakeup()
   hljs.initHighlighting()
 })

assets/js/epub.js

@@ -2,5 +2,7 @@
 // ------------
 
 import hljs from 'highlight.js/build/highlight.pack'
+import {initialize as initMakeup} from './makeup'
 
+initMakeup()
 hljs.initHighlightingOnLoad()

assets/js/makeup.js

@@ -0,0 +1,25 @@
+var HIGHLIGHT_CLASS = 'hll'
+function onMouseEnter (evt) {
+  var groupId = evt.target.getAttribute('data-group-id')
+  var siblings = document.querySelectorAll('[data-group-id=\'' + groupId + '\']')
+  for (var i = 0; i < siblings.length; ++i) {
+    siblings[i].classList.add(HIGHLIGHT_CLASS)
+  }
+}
+
+function onMouseLeave (evt) {
+  var groupId = evt.target.getAttribute('data-group-id')
+  var siblings = document.querySelectorAll('[data-group-id=\'' + groupId + '\']')
+  for (var i = 0; i < siblings.length; ++i) {
+    siblings[i].classList.remove(HIGHLIGHT_CLASS)
+  }
+}
+
+export function initialize () {
+  var delims = document.querySelectorAll('[data-group-id]')
+  for (var i = 0; i < delims.length; i++) {
+    var elem = delims[i]
+    elem.addEventListener('mouseenter', onMouseEnter)
+    elem.addEventListener('mouseleave', onMouseLeave)
+  }
+}

assets/less/app.less

@@ -21,3 +21,4 @@
 
 @import './screen-reader';
 @import './print';
+@import './makeup';

assets/less/epub.less

@@ -2,6 +2,7 @@
 @import 'npm://highlight.js/src/styles/tomorrow';
 
 @import './variables';
+@import './makeup';
 
 body {
   display: block;

assets/less/makeup.less

@@ -0,0 +1,188 @@
+code.makeup {
+  display: block;
+  overflow-x: auto;
+  padding-top: 0.3em !important;
+  padding-bottom: 0.3em !important;
+  padding-right: 0.5em !important;
+  padding-left: 0.5em !important;
+  color: white;
+  white-space: pre;
+}
+
+.makeup {
+  .unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .hll {background-color: #ffffcc}
+  .bp {color: #3465a4; } /* :name_builtin_pseudo */
+  .c {color: #8E908C; } /* :comment */
+  .c1 {color: #8E908C; } /* :comment_single */
+  .ch {color: #8E908C; } /* :comment_hashbang */
+  .cm {color: #8E908C; } /* :comment_multiline */
+  .cp {color: #8E908C; } /* :comment_preproc */
+  .cpf {color: #8E908C; } /* :comment_preproc_file */
+  .cs {color: #8E908C; font-style: italic; } /* :comment_special */
+  .dl {color: #4e9a06; } /* :string_delimiter */
+  .err {color: #a40000; border: #ef2929; } /* :error */
+  .fm {color: #000000; } /* :name_function_magic */
+  .g {color: #000000; } /* :generic */
+  .gd {color: #a40000; } /* :generic_deleted */
+  .ge {color: #000000; font-style: italic; } /* :generic_emph */
+  .gh {color: #000080; font-weight: bold; } /* :generic_heading */
+  .gi {color: #00A000; } /* :generic_inserted */
+  .go {color: #000000; font-style: italic; } /* :generic_output */
+  .gp {color: #8f5902; } /* :generic_prompt */
+  .gr {color: #ef2929; } /* :generic_error */
+  .gs {color: #000000; font-weight: bold; } /* :generic_strong */
+  .gt {color: #a40000; font-weight: bold; } /* :generic_traceback */
+  .gu {color: #800080; font-weight: bold; } /* :generic_subheading */
+  .il {color: #0000cf; font-weight: bold; } /* :number_integer_long */
+  .k {color: #204a87; font-weight: bold; } /* :keyword */
+  .kc {color: #204a87; font-weight: bold; } /* :keyword_constant */
+  .kd {color: #204a87; font-weight: bold; } /* :keyword_declaration */
+  .kn {color: #204a87; font-weight: bold; } /* :keyword_namespace */
+  .kp {color: #204a87; font-weight: bold; } /* :keyword_pseudo */
+  .kr {color: #204a87; font-weight: bold; } /* :keyword_reserved */
+  .kt {color: #204a87; font-weight: bold; } /* :keyword_type */
+  .l {color: #000000; } /* :literal */
+  .ld {color: #8f5902; } /* :literal_date */
+  .m {color: #0000cf; font-weight: bold; } /* :number */
+  .mb {color: #0000cf; font-weight: bold; } /* :number_bin */
+  .mf {color: #0000cf; font-weight: bold; } /* :number_float */
+  .mh {color: #0000cf; font-weight: bold; } /* :number_hex */
+  .mi {color: #0000cf; font-weight: bold; } /* :number_integer */
+  .mo {color: #0000cf; font-weight: bold; } /* :number_oct */
+  .n {color: #000000; } /* :name */
+  .na {color: #c4a000; } /* :name_attribute */
+  .nb {color: #204a87; } /* :name_builtin */
+  .nc {color: #5c35cc; } /* :name_class */
+  .nd {color: #5c35cc; font-weight: bold; } /* :name_decorator */
+  .ne {color: #cc0000; font-weight: bold; } /* :name_exception */
+  .nf {color: #ce5c00; } /* :name_function */
+  .ni {color: #ce5c00; } /* :name_entity */
+  .nl {color: #f57900; } /* :name_label */
+  .nn {color: #000000; } /* :name_namespace */
+  .no {color: #0000cf; } /* :name_constant */
+  .nt {color: #204a87; font-weight: bold; } /* :name_tag */
+  .nv {color: #000000; } /* :name_variable */
+  .nx {color: #000000; } /* :name_other */
+  .o {color: #ce5c00; font-weight: bold; } /* :operator */
+  .ow {color: #204a87; font-weight: bold; } /* :operator_word */
+  .p {color: #000000; } /* :punctuation */
+  .py {color: #000000; } /* :name_property */
+  .s {color: #4e9a06; } /* :string */
+  .s1 {color: #c4a000 } /* :string_single */
+  .s2 {color: #4e9a06; } /* :string_double */
+  .sa {color: #4e9a06; } /* :string_affix */
+  .sb {color: #4e9a06; } /* :string_backtick */
+  .sc {color: #4e9a06; } /* :string_char */
+  .sd {color: #8f5902; font-style: italic; } /* :string_doc */
+  .se {color: #204a87; } /* :string_escape */
+  .sh {color: #4e9a06; } /* :string_heredoc */
+  .si {color: #5c35cc; } /* :string_interpol */
+  .sr {color: #cc0000; } /* :string_regex */
+  .ss {color: #f57900; } /* :string_symbol */
+  .sx {color: #4e9a06; } /* :string_other */
+  .sx {color: #f56900; } /* :string_sigil */
+  .vc {color: #000000; } /* :name_variable_class */
+  .vg {color: #000000; } /* :name_variable_global */
+  .vi {color: #000000; } /* :name_variable_instance */
+  .vm {color: #000000; } /* :name_variable_magic */
+  .x {color: #000000; } /* :other */
+}
+
+.night-mode code.makeup {
+  display: block;
+  overflow-x: auto;
+  padding-top: 0.3em !important;
+  padding-bottom: 0.3em !important;
+  padding-right: 0.5em !important;
+  padding-left: 0.5em !important;
+  white-space: pre;
+}
+
+.night-mode .makeup {
+  color: #e7e9db;
+  background-color: #2f1e2e;
+}
+
+.night-mode .makeup {
+  .hll {background-color: #4f424c}
+  .bp {color: #e7e9db; } /* :name_builtin_pseudo */
+  .c {color: #776e71; } /* :comment */
+  .c1 {color: #776e71; } /* :comment_single */
+  .ch {color: #776e71; } /* :comment_hashbang */
+  .cm {color: #776e71; } /* :comment_multiline */
+  .cp {color: #776e71; } /* :comment_preproc */
+  .cpf {color: #776e71; } /* :comment_preproc_file */
+  .cs {color: #776e71; } /* :comment_special */
+  .dl {color: #48b685; } /* :string_delimiter */
+  .err {color: #ef6155; } /* :error */
+  .fm {color: #06b6ef; } /* :name_function_magic */
+  .gd {color: #ef6155; } /* :generic_deleted */
+  .ge {font-style: italic; } /* :generic_emph */
+  .gh {color: #e7e9db; font-weight: bold; } /* :generic_heading */
+  .gi {color: #48b685; } /* :generic_inserted */
+  .gp {color: #776e71; font-weight: bold; } /* :generic_prompt */
+  .gs {font-weight: bold; } /* :generic_strong */
+  .gu {color: #5bc4bf; font-weight: bold; } /* :generic_subheading */
+  .gt {color: #ef6155; font-weight: bold; }
+  .il {color: #f99b15; } /* :number_integer_long */
+  .k {color: #815ba4; font-weight: normal } /* :keyword */
+  .kc {color: #815ba4; font-weight: normal } /* :keyword_constant */
+  .kd {color: #815ba4; font-weight: normal } /* :keyword_declaration */
+  .kn {color: #5bc4bf; font-weight: normal } /* :keyword_namespace */
+  .kp {color: #815ba4; font-weight: normal } /* :keyword_pseudo */
+  .kr {color: #815ba4; font-weight: normal } /* :keyword_reserved */
+  .kt {color: #fec418; font-weight: normal } /* :keyword_type */
+  .l {color: #f99b15; } /* :literal */
+  .ld {color: #776e71; } /* :literal_date */
+  .m {color: #f99b15; } /* :number */
+  .mb {color: #f99b15; font-weight: normal } /* :number_bin */
+  .mf {color: #f99b15; font-weight: normal } /* :number_float */
+  .mh {color: #f99b15; font-weight: normal } /* :number_hex */
+  .mi {color: #f99b15; font-weight: normal } /* :number_integer */
+  .mo {color: #f99b15; font-weight: normal } /* :number_oct */
+  .n {color: #e7e9db; } /* :name */
+  .na {color: #06b6ef; } /* :name_attribute */
+  .nb {color: #e7e9db; } /* :name_builtin */
+  .nc {color: #fec418; } /* :name_class */
+  .nd {color: #5bc4bf; } /* :name_decorator */
+  .ne {color: #ef6155; } /* :name_exception */
+  .nf {color: #06b6ef; } /* :name_function */
+  .ni {color: #ef6155; } /* :name_entity */
+  .nl {color: #e7e9db; } /* :name_label */
+  .nn {color: #fec418; } /* :name_namespace */
+  .no {color: #ef6155; } /* :name_constant */
+  .nt {color: #5bc4bf; } /* :name_tag */
+  .nv {color: #ef6155; } /* :name_variable */
+  .nx {color: #06b6ef; } /* :name_other */
+  .o {color: #5bc4bf; font-weight: normal } /* :operator */
+  .ow {color: #5bc4bf; font-weight: normal } /* :operator_word */
+  .p {color: #e7e9db; } /* :punctuation */
+  .py {color: #e7e9db; } /* :name_property */
+  .s {color: #48b685; } /* :string */
+  .s1 {color: #48b685; } /* :string_single */
+  .s2 {color: #48b685; } /* :string_double */
+  .sa {color: #48b685; } /* :string_affix */
+  .sb {color: #48b685; } /* :string_backtick */
+  .sc {color: #e7e9db; } /* :string_char */
+  .sd {color: #776e71; } /* :string_doc */
+  .se {color: #f99b15; } /* :string_escape */
+  .sh {color: #48b685; } /* :string_heredoc */
+  .si {color: #f99b15; } /* :string_interpol */
+  .sr {color: #48b685; } /* :string_regex */
+  .ss {color: #48b685; } /* :string_symbol */
+  .sx {color: #48b685; } /* :string_other */
+  .sx {color: #48b685; } /* :string_sigil */
+  .vc {color: #ef6155; } /* :name_variable_class */
+  .vg {color: #ef6155; } /* :name_variable_global */
+  .vi {color: #ef6155; } /* :name_variable_instance */
+  .vm {color: #ef6155; } /* :name_variable_magic */
+}

lib/ex_doc/highlighter.ex

@@ -0,0 +1,37 @@
+defmodule ExDoc.Highlighter do
+  @moduledoc false
+  alias ExDoc.Highlighter.HtmlDecoder
+
+  # Assets are included in the bundles and don't need to be declared here.
+  def assets(_), do: []
+
+  def before_closing_head_tag(_), do: ""
+
+  def before_closing_body_tag(_), do: ""
+
+  # If new lexers are available, add them here:
+  defp pick_language_and_lexer(""), do: {"elixir", Makeup.Lexers.ElixirLexer}
+  defp pick_language_and_lexer("elixir"), do: {"elixir", Makeup.Lexers.ElixirLexer}
+  defp pick_language_and_lexer(other), do: {other, nil}
+
+  # Public API for the module.
+  # Highlights all code block in an already generated HTML document.
+  def highlight_code_blocks(html) do
+    Regex.replace(~r/<pre><code(?:\s+class="(\w*)")?>([^<]*)<\/code><\/pre>/, html, &highlight_code_block/3)
+  end
+
+  defp highlight_code_block(full_block, lang, code) do
+    case pick_language_and_lexer(lang) do
+      {_language, nil} -> full_block
+      {language, lexer} -> render_code(language, lexer, code)
+    end
+  end
+
+  defp render_code(lang, lexer, code) do
+    highlighted =
+      code
+      |> HtmlDecoder.unescape_html_entities()
+      |> Makeup.highlight_inner_html(lexer: lexer)
+    ~s(<pre><code class="nohighlight makeup #{lang}">#{highlighted}</code></pre>)
+  end
+end

lib/ex_doc/highlighter/html_decoder.ex

@@ -0,0 +1,24 @@
+defmodule ExDoc.Highlighter.HtmlDecoder do
+  @moduledoc false
+  entities = [{"&amp;", ?&}, {"&lt;", ?<}, {"&gt;", ?>}, {"&quot;", ?"}, {"&#39;", ?'}]
+
+  for {encoded, decoded} <- entities do
+    defp to_iodata(unquote(encoded) <> rest) do
+      [unquote(decoded) | to_iodata(rest)]
+    end
+  end
+
+  defp to_iodata(<< c, rest :: binary >>) do
+    [c | to_iodata(rest)]
+  end
+
+  defp to_iodata(<<>>) do
+    []
+  end
+
+  def unescape_html_entities(html) do
+    html
+    |> to_iodata()
+    |> IO.iodata_to_binary
+  end
+end