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;
}
+.code,
+.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;
- }
</style>
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>))))
</pre>
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>
<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>
</div>
<button id="compile-fennel">→</button>