From 944c9ada1daa39aa9b419af3da8a8b4edb19f7f1 Mon Sep 17 00:00:00 2001 From: Oliver Vartiainen Date: Fri, 3 Mar 2023 14:04:01 +0200 Subject: [PATCH] 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 --- Makefile | 5 ++- fennel-highlight | 2 +- fennel.css | 82 +++++++++++++++++++++++++++++------------------- head.html | 9 ++---- sample.html | 17 +++++----- see.fnl | 4 +-- see.html | 4 +-- 7 files changed, 68 insertions(+), 55 deletions(-) diff --git a/Makefile b/Makefile index 84e319f..4382035 100644 --- a/Makefile +++ b/Makefile @@ -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 \ diff --git a/fennel-highlight b/fennel-highlight index c8f38e6..5d9309d 160000 --- a/fennel-highlight +++ b/fennel-highlight @@ -1 +1 @@ -Subproject commit c8f38e652c2c73fa50acb4ae93eb6797f761e419 +Subproject commit 5d9309d23a66e9209ab870d18e2d263369a8f37b diff --git a/fennel.css b/fennel.css index 88fda51..529c42b 100644 --- a/fennel.css +++ b/fennel.css @@ -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; diff --git a/head.html b/head.html index 0123914..8cc4c10 100644 --- a/head.html +++ b/head.html @@ -1,15 +1,12 @@ - + the Fennel programming language diff --git a/sample.html b/sample.html index b85ac88..5e3e60e 100644 --- a/sample.html +++ b/sample.html @@ -1,10 +1,11 @@ -
;; Sample: read the state of the keyboard and move the player accordingly
-(local dirs {:up [0 -1] :down [0 1] :left [-1 0] :right [1 0]})
+
+;; Sample: read the state of the keyboard and move the player accordingly
+(local dirs {:up [0 -1] :down [0 1] :left [-1 0] :right [1 0]})
 
-(each [key [dx dy] (pairs dirs)]
-  (when (love.keyboard.isDown key)
-    (let [[px py] player
-          x (+ px (* dx player.speed dt))
-          y (+ py (* dy player.speed dt))]
-      (world:move player x y))))
+(each [key [dx dy] (pairs dirs)]
+  (when (love.keyboard.isDown key)
+    (let [[px py] player
+          x (+ px (* dx player.speed dt))
+          y (+ py (* dy player.speed dt))]
+      (world:move player x y))))
 

diff --git a/see.fnl b/see.fnl
index 603f3f2..0956f86 100644
--- a/see.fnl
+++ b/see.fnl
@@ -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)))
diff --git a/see.html b/see.html
index 7facb21..ed1d1a4 100644
--- a/see.html
+++ b/see.html
@@ -16,14 +16,14 @@
         
-        
+        
       
 
       

         
-        
+        
       

 
       
-- 
2.45.2