. -> ;;<hl>

fastn-stack · Mar 16, 2023 · f9b9cd3 · f9b9cd3
1 parent 87667bc
commit f9b9cd3
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 54 deletions.
diff --git a/ftd/src/executor/code.rs b/ftd/src/executor/code.rs
@@ -106,14 +106,21 @@ fn highlighted_html_for_string(
 
     for line in syntect::util::LinesWithEndings::from(s) {
         let mut regions = highlighter.highlight_line(line, ss)?;
-        if ext.eq("ftd") && ftd::interpreter2::FTD_HIGHLIGHTER.is_match(line) {
-            regions.remove(0);
+        let highlighted = ftd::interpreter2::FTD_HIGHLIGHTER.is_match(line);
+        if ext.eq("ftd") && highlighted {
+            let style = regions.remove(regions.len() - 2).0;
+            let c = color_to_hex(&style.background);
+            output
+                .push_str(format!("<div style=\"background-color:{}; width: 100%\">", c).as_str());
         }
         syntect::html::append_highlighted_html_for_styled_line(
             &regions[..],
             syntect::html::IncludeBackground::IfDifferent(syntect::highlighting::Color::WHITE),
             &mut output,
         )?;
+        if ext.eq("ftd") && highlighted {
+            output.push_str("</div>");
+        }
     }
     output.push_str("</pre>\n");
     Ok(output)
@@ -123,18 +130,17 @@ fn start_highlighted_html_snippet(t: &syntect::highlighting::Theme) -> String {
     let c = t
         .settings
         .background
-        .map(|c| {
-            let a = if c.a != 255 {
-                format!("{:02x}", c.a)
-            } else {
-                Default::default()
-            };
-            format!(
-                " style=\"background-color:#{:02x}{:02x}{:02x}{};\"",
-                c.r, c.g, c.b, a
-            )
-        })
+        .map(|c| format!(" style=\"background-color:{};\"", color_to_hex(&c)))
         .unwrap_or_default();
 
     format!("<pre{}>\n", c)
 }
+
+fn color_to_hex(c: &syntect::highlighting::Color) -> String {
+    let a = if c.a != 255 {
+        format!("{:02x}", c.a)
+    } else {
+        Default::default()
+    };
+    format!("#{:02x}{:02x}{:02x}{}", c.r, c.g, c.b, a)
+}
diff --git a/ftd/src/interpreter2/constants.rs b/ftd/src/interpreter2/constants.rs
@@ -1,5 +1,5 @@
 pub static FTD_HIGHLIGHTER: once_cell::sync::Lazy<regex::Regex> =
-    once_cell::sync::Lazy::new(|| regex::Regex::new(r"^((;;)( +)(<hl>))( *)").unwrap());
+    once_cell::sync::Lazy::new(|| regex::Regex::new(r"((;;)( *)(<hl>))( *)(\n?)$").unwrap());
 
 pub const FTD_BREAKPOINT_WIDTH: &str = "ftd#breakpoint-width";
 pub const FTD_BREAKPOINT_WIDTH_DATA: &str = "ftd#breakpoint-width-data";

diff --git a/ftd/syntax/ftd.sublime-syntax b/ftd/syntax/ftd.sublime-syntax
@@ -9,31 +9,32 @@ contexts:
     - match: ^--\s+
       push: section_line
       scope: comment
-    - match: ^((;;)( *)(<hl>))( *)
-      push: highlight
-      scope: keyword.declaration
-    - match: "^(.*?)(:)( *)(.*$)"
+    - match: "^(.*?)(:)( *)(.*)((;;)( *)(<hl>))( *)$"
       captures:
         1: storage.type.function
         2: comment
         4: constant.character
+        0: keyword.declaration
+    - match: "^(.*?)(:)( *)(.*)$"
+      captures:
+        1: storage.type.function
+        2: comment
+        4: constant.character
+    - match: "^(.*)((;;)( *)(<hl>))( *)$"
+      captures:
+        1: comment
+        0: keyword.declaration
   section_line:
     - meta_scope: comment
     - match: $
       pop: true
-    - match: "(.*?)(:)( *)(.*)$"
+    - match: "(.*?)(:)( *)(.*)((;;)( *)(<hl>))( *)$"
       captures:
         1: entity.name.class
+        2: comment
         4: string
-  highlight:
-    - meta_scope: keyword.declaration
-    - match: $
-      pop: true
-    - match: --\s+
-      push: section_line
-      scope: comment
-    - match: "(.*?)(:)( *)(.*$)"
+        0: keyword.declaration
+    - match: "(.*?)(:)( *)(.*)$"
       captures:
-        1: storage.type.function
-        2: comment
-        4: constant.character
+        1: entity.name.class
+        4: string
diff --git a/ftd/t/html/52-code-and-iframe.ftd b/ftd/t/html/52-code-and-iframe.ftd
@@ -137,15 +137,17 @@ if: {foo.name != NULL}
 \-- component toggle-ui:
 caption title:
 body description:
-\;; <hl> boolean $open: true
+boolean $open: true  ;; <hl>
 
-\-- ftd.column:
+\-- ftd.column:  ;; <hl>
 $on-click$: $ftd.toggle($a = $toggle-ui.open)
 
 \-- ftd.text:
 
 My text
 
+This is highlighted  ;; <hl>
+
 \-- ftd.text: $toggle-ui.description
 if: { toggle-ui.open }