944c9ada1daa39aa9b419af3da8a8b4edb19f7f1 — Oliver Vartiainen 6 months ago 770d7a7
Unify and improve highlighting across the board

* Update fennel-highlight
* Match the sample on index.html to see.html
* Match all Pandoc-generated code to see.html
7 files changed, 68 insertions(+), 55 deletions(-)

M Makefile
M fennel-highlight
M fennel.css
M head.html
M sample.html
M see.fnl
M see.html
M Makefile => Makefile +2 -3
@@ 82,9 82,8 @@ tagdocs: tags $(TAGDOCS)
lua: $(LUA)
clean: cleantagdirs ; rm -f $(HTML) index.html $(LUA)

see.lua: see.fnl fennel-highlight/highlight.fnl syntax-table.fnl
	fennel/fennel --add-fennel-path "fennel-highlight/?.fnl" \
		--compile --require-as-include --skip-include fennel,js $< > $@
see.lua: see.fnl fennel-highlight/init.fnl syntax-table.fnl
	fennel/fennel --compile --require-as-include --skip-include fennel,js $< > $@

syntax-table.fnl: fennel/fennel
	fennel/fennel --eval \

M fennel-highlight => fennel-highlight +1 -1
@@ 1,1 1,1 @@
Subproject commit c8f38e652c2c73fa50acb4ae93eb6797f761e419
Subproject commit 5d9309d23a66e9209ab870d18e2d263369a8f37b

M fennel.css => fennel.css +49 -33
@@ 28,18 28,50 @@ tt, pre, code, kbd, textarea { font-family: "Fira Mono", Inconsolata, monospace;
    height: 20em;

#sample {
    padding: 1em;

.code {
    border-radius: 3px;
    border: 1px solid #ddd;
    font-size: 12pt;
    text-shadow: none;
    color: #333;
    background: #f8f8f8;
    line-height: 1.5;
    margin: 3em auto;
    padding: 0;
    text-align: left;
    margin: 3em auto;
    border-radius: 3px;
    border: 1px solid #ddd;
    text-shadow: none;
    white-space: pre-wrap;

.sourceCode { background-color: #f9fef5; color: #181a19; }

.sourceCode .va,
.sourceCode .fu { color: #181a19; }

.code .comment,
.sourceCode .co { color: #94b996; font-style: italic; }

.code .keyword,
.code .string,
.code .number,
.code .nil,
.code .boolean,
.sourceCode .st,
.sourceCode .fl,
.sourceCode .dv { color: #8e9144; }

.code .symbol.special,
.code .symbol.macro,
.code .symbol.global,
.sourceCode .ex,
.sourceCode .kw { color: #448f22 }

.sourceCode .ex,
.sourceCode .bu,
.code .symbol.special { font-weight: bold; }

.code-flex {
    height: 100%;
    display: flex;

@@ 95,15 127,6 @@ tt, pre, code, kbd, textarea { font-family: "Fira Mono", Inconsolata, monospace;
    border: 2px solid #ddd;

/* code sample */
#sample { font-size: 12pt; padding: 1em 1.5em; }
#sample .builtin {/* font-lock-builtin-face */ color: #483d8b;}
#sample .keyword {/* font-lock-keyword-face */ color: #a020f0;}
#sample .string {/* font-lock-string-face */ color: #8b2252;}
#sample .type {/* font-lock-type-face */ color: #228b22;}
#sample .variable-name {/* font-lock-variable-name-face */ color: #a0522d;}
#sample .comment {/* font-lock-comment-face */ color: #b22222;}

/* see fennel */
#see-fennel .editor {
    display: grid; /* This combined with `grid-column: 1` and `grid-row: 1` gives overlapped elements */

@@ 138,28 161,21 @@ tt, pre, code, kbd, textarea { font-family: "Fira Mono", Inconsolata, monospace;
    z-index: 1;

#see-fennel .editor textarea::placeholder {
    opacity: 1;
    color: #94b996; /* Same color as comment */

#see-fennel .editor pre {
    border-radius: 3px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    margin: 0;
    overflow-y: auto;
    width: 100%;
    z-index: 0;

/* Syntax highlight theme */
#see-fennel .editor pre { background-color: #f9fef5; color: #181a19; }
#see-fennel .editor pre .comment { color: #94b996; font-style: italic; }
#see-fennel .editor pre .keyword,
#see-fennel .editor pre .string,
#see-fennel .editor pre .number,
#see-fennel .editor pre .nil,
#see-fennel .editor pre .boolean { color: #8e9144; }
#see-fennel .editor pre .symbol.special,
#see-fennel .editor pre .symbol.macro,
#see-fennel .editor pre .symbol.global { color: #448f22; font-weight: bold; }
#see-fennel .editor textarea::placeholder {
    opacity: 1;
    color: #94b996; /* Same color as comment */

#see-fennel button, #see-fennel select {
    margin: 0.5em;

M head.html => head.html +3 -6
@@ 1,15 1,12 @@
    <link rel="stylesheet" href="https://fennel-lang.org/fennel.css"></link>
    <link rel="stylesheet" href="/fennel.css"></link>
    <link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css"/>
    <script type="text/javascript" src="/fengari-web.js"></script>
    <script type="application/lua" src="init.lua" async></script>
    <title>the Fennel programming language</title>
    <style type="text/css">
      pre {
      border-radius: 5px;
      border: 1px solid #ac9;
      border-radius: 3px;
      border: 1px solid #ddd;
      padding: 0.7em;
      div.sourceCode {
      background-color: #eeffcc;

M sample.html => sample.html +9 -8
@@ 1,10 1,11 @@
<pre id="sample" class="code"><span class="comment">;; Sample: read the state of the keyboard and move the player accordingly
</span>(<span class="keyword">local</span> dirs {<span class="builtin">:up</span> [0 -1] <span class="builtin">:down</span> [0 1] <span class="builtin">:left</span> [-1 0] <span class="builtin">:right</span> [1 0]})
<pre id="sample" class="code">
<span class="comment">;; Sample: read the state of the keyboard and move the player accordingly
</span>(<span class="symbol special">local</span> <span class="symbol">dirs</span> {<span class="keyword">:up</span> [<span class="number">0</span> <span class="number">-1</span>] <span class="keyword">:down</span> [<span class="number">0</span> <span class="number">1</span>] <span class="keyword">:left</span> [<span class="number">-1</span> <span class="number">0</span>] <span class="keyword">:right</span> [<span class="number">1</span> <span class="number">0</span>]})

(<span class="keyword">each</span> [key [dx dy] (<span class="builtin">pairs</span> dirs)]
  (<span class="keyword">when</span> (<span class="type">love.keyboard.isDown</span> key)
    (<span class="keyword">let</span> [[px py] player
          x (<span class="keyword">+</span> px (<span class="keyword">*</span> dx <span class="type">player.speed</span> dt))
          y (<span class="keyword">+</span> py (<span class="keyword">*</span> dy <span class="type">player.speed</span> dt))]
      (<span class="builtin">world:move</span> player x y))))
(<span class="symbol special">each</span> [<span class="symbol">key</span> [<span class="symbol">dx</span> <span class="symbol">dy</span>] (<span class="symbol global">pairs</span> <span class="symbol">dirs</span>)]
  (<span class="symbol macro">when</span> (<span class="symbol">love.keyboard.isDown</span> <span class="symbol">key</span>)
    (<span class="symbol special">let</span> [[<span class="symbol">px</span> <span class="symbol">py</span>] <span class="symbol">player</span>
          <span class="symbol">x</span> (<span class="symbol special">+</span> <span class="symbol">px</span> (<span class="symbol special">*</span> <span class="symbol">dx</span> <span class="symbol">player.speed</span> <span class="symbol">dt</span>))
          <span class="symbol">y</span> (<span class="symbol special">+</span> <span class="symbol">py</span> (<span class="symbol special">*</span> <span class="symbol">dy</span> <span class="symbol">player.speed</span> <span class="symbol">dt</span>))]
      (<span class="symbol">world:move</span> <span class="symbol">player</span> <span class="symbol">x</span> <span class="symbol">y</span>))))

M see.fnl => see.fnl +2 -2
@@ 52,7 52,7 @@
(local fennel-syntax (require :syntax-table))

(fn highlight-fennel []
  (let [highlight (require :highlight)
  (let [highlight (require :fennel-highlight)
        highlighted-source-tags (highlight.fennel->html fennel-syntax fennel-source.value)
        highlighted-source (table.concat highlighted-source-tags)]
    (set fennel-highlighted.innerHTML highlighted-source)))

@@ 66,7 66,7 @@
  (tset lua-syntax k {:special? true}))

(fn highlight-lua []
  (let [highlight (require :highlight)
  (let [highlight (require :fennel-highlight)
        highlighted-source-tags (highlight.lua->html fennel-syntax lua-source.value)
        highlighted-source (table.concat highlighted-source-tags)]
    (set lua-highlighted.innerHTML highlighted-source)))

M see.html => see.html +2 -2
@@ 16,14 16,14 @@
        <textarea id="fennel-source"
                  placeholder="Enter some Fennel code to see it compiled to Lua!"
                  spellcheck="false" autocorrect="off" autocapitalize="off"></textarea>
        <pre aria-hidden="true" id="fennel-highlighted"></pre>
        <pre id="fennel-highlighted" class="code" aria-hidden="true"></pre>

      <div id="lua-editor" class="editor">
        <textarea id="lua-source"
                  placeholder="Or enter some Lua to see it compiled to Fennel..."
                  spellcheck="false" autocorrect="off" autocapitalize="off"></textarea>
        <pre aria-hidden="true" id="lua-highlighted"></pre>
        <pre id="lua-highlighted" class="code" aria-hidden="true"></pre>

      <button id="compile-fennel">→</button>