add syntax highlighting to code block

ranile · Oct 3, 2020 · 4e654b6 · 4e654b6
1 parent 6714542
commit 4e654b6
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 26 deletions.
diff --git a/website/Cargo.toml b/website/Cargo.toml
@@ -13,3 +13,12 @@ yew-router = { git = "https://github.com/yewstack/yew/", branch = "master" }
 yew-material-components = { path = ".." }
 web-sys = { version = "0.3", features = ["HtmlMetaElement", "Document", "Element", "DocumentFragment", "HtmlTemplateElement"] }
 unindent = "0.1"
+
+[dependencies.syntect]
+version = "4.4"
+default-features = false
+features = [
+    "html",
+    "dump-load",
+    "regex-fancy"
+]
diff --git a/website/src/components/code_block.rs b/website/src/components/code_block.rs
@@ -45,6 +45,7 @@ impl Component for Codeblock {
     }
 
     fn view(&self) -> Html {
+        let code = html_to_element(&self.props.code);
         html! { <>
             <section class="codeblock">
                 <section class="header">
@@ -56,9 +57,7 @@ impl Component for Codeblock {
 
                 {
                     if self.showing_code {
-                        html! {
-                            <pre><code>{&self.props.code}</code></pre>
-                        }
+                        {code}
                     } else { html!{} }
                 }
 

diff --git a/website/src/lib.rs b/website/src/lib.rs
@@ -11,12 +11,11 @@ use crate::components::{
     CircularProgress, Drawer, FormField, LinearProgress, List, IconButtonToggle, Slider,
     Tabs, Snackbar, Textfield, TextArea, Select,
 };
-use yew::services::fetch::{Request, FetchTask, FetchService, Response};
-use yew::format::{Nothing, Binary};
-use std::rc::Rc;
-use wasm_bindgen::prelude::*;
-use yew::services::ConsoleService;
 
+use wasm_bindgen::prelude::*;
+use std::cell::RefCell;
+use syntect::parsing::SyntaxSet;
+use syntect::highlighting::Theme;
 
 #[derive(Switch, Clone)]
 pub enum AppRoute {
@@ -80,26 +79,27 @@ pub enum Msg {
     Closed,
 }
 
+pub struct SyntectData {
+    theme: Option<Theme>,
+    syntax_set: Option<SyntaxSet>,
+}
+
+thread_local!(pub static SYNTECT_DATA: RefCell<SyntectData> = RefCell::new(SyntectData {
+    theme: None,
+    syntax_set: None,
+}));
+
+
 impl Component for App {
     type Message = Msg;
     type Properties = ();
 
     fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
-        /*let theme_task = FetchService::fetch_binary(
-            Request::get("/Material-Theme.theme").body(Nothing).unwrap(),
-            link.callback(|resp: Response<Binary>| {
-                let resp = resp.body().as_ref().unwrap();
-                Msg::SyntactThemeLoaded(syntect::dumps::from_binary(resp))
-            }),
-        ).unwrap();
-        let syntax_task = FetchService::fetch_binary(
-            Request::get("/rust.syntax").body(Nothing).unwrap(),
-            link.callback(|resp: Response<Binary>| {
-                let resp = resp.body().as_ref().unwrap();
-                Msg::SyntactSyntaxSetLoaded(syntect::dumps::from_binary(resp))
-            }),
-        ).unwrap();*/
-
+        SYNTECT_DATA.with(|cell| {
+            let mut data = cell.borrow_mut();
+            data.theme = Some(syntect::dumps::from_binary(include_bytes!("../syntect-dumps/Material-Theme.theme")));
+            data.syntax_set = Some(syntect::dumps::from_binary(include_bytes!("../syntect-dumps/rust.syntax")));
+        });
         Self { link, drawer_state: false }
     }
 
@@ -209,7 +209,7 @@ impl App {
 }
 
 fn html_to_element(html: &str) -> Html {
-    let template: wasm_bindgen::JsValue = web_sys::window()
+    let template: JsValue = web_sys::window()
         .unwrap()
         .document()
         .unwrap()

diff --git a/website/src/macros.rs b/website/src/macros.rs
@@ -26,6 +26,13 @@ macro_rules! with_raw_code {
         let body_offset = CODE[marker_start..].find('{').unwrap();
         let code = crate::macros::read_until_close(&CODE[marker_start + body_offset + 9..]);
         let code = unindent::unindent(code);
-        (code, $expr)
+
+        let html_string = crate::SYNTECT_DATA.with(|cell| {
+            let data = cell.borrow();
+            let syntax = data.syntax_set.as_ref().unwrap().find_syntax_by_extension("rs").unwrap();
+            syntect::html::highlighted_html_for_string(&code, &data.syntax_set.as_ref().unwrap(), syntax, &data.theme.as_ref().unwrap())
+        });
+
+        (html_string, $expr)
     }};
 }
diff --git a/website/styles/styles.scss b/website/styles/styles.scss
@@ -226,7 +226,8 @@ mwc-list-item, mwc-check-list-item, mwc-radio-list-item {
         word-wrap: break-word;
 
         margin-bottom: 1em;
-        padding: 1em 0 1em 1em;
+        font-family: "JetBrains Mono", "Monospaced", monospace;
+        padding: 1em;
     }
 
     .demo {