get HTML styling to work partially with rust

markdown_backend/src/markdown.rs

@@ -133,12 +133,78 @@ fn strip_emojis(s: &str) -> String {
 
 static AMMONIA: Lazy<ammonia::Builder<'static>> = Lazy::new(|| {
     let mut builder = ammonia::Builder::default();
-    builder.add_tag_attributes("h1", &["id"]);
+    // All possible HTML Tags so that you can stylize via HTML
-    builder.add_tag_attributes("h2", &["id"]);
+    builder.add_tag_attributes("h1", &["id", "style"]);
-    builder.add_tag_attributes("h3", &["id"]);
+    builder.add_tag_attributes("h2", &["id", "style"]);
-    builder.add_tag_attributes("h4", &["id"]);
+    builder.add_tag_attributes("h3", &["id", "style"]);
-    builder.add_tag_attributes("h5", &["id"]);
+    builder.add_tag_attributes("h4", &["id", "style"]);
-    builder.add_tag_attributes("h6", &["id"]);
+    builder.add_tag_attributes("h5", &["id", "style"]);
+    builder.add_tag_attributes("h6", &["id", "style"]);
+    builder.add_tag_attributes("p", &["style"]);
+    builder.add_tag_attributes("span", &["style"]);
+    builder.add_tag_attributes("strong", &["style"]);
+    builder.add_tag_attributes("em", &["style"]);
+    builder.add_tag_attributes("b", &["style"]);
+    builder.add_tag_attributes("i", &["style"]);
+    builder.add_tag_attributes("u", &["style"]);
+    builder.add_tag_attributes("mark", &["style"]);
+    builder.add_tag_attributes("small", &["style"]);
+    builder.add_tag_attributes("abbr", &["style"]);
+    builder.add_tag_attributes("cite", &["style"]);
+    builder.add_tag_attributes("q", &["style"]);
+    builder.add_tag_attributes("code", &["style"]);
+    builder.add_tag_attributes("pre", &["style"]);
+    builder.add_tag_attributes("kbd", &["style"]);
+    builder.add_tag_attributes("samp", &["style"]);
+    builder.add_tag_attributes("div", &["style"]);
+    builder.add_tag_attributes("section", &["style"]);
+    builder.add_tag_attributes("article", &["style"]);
+    builder.add_tag_attributes("header", &["style"]);
+    builder.add_tag_attributes("footer", &["style"]);
+    builder.add_tag_attributes("main", &["style"]);
+    builder.add_tag_attributes("aside", &["style"]);
+    builder.add_tag_attributes("nav", &["style"]);
+    builder.add_tag_attributes("ul", &["style"]);
+    builder.add_tag_attributes("ol", &["style"]);
+    builder.add_tag_attributes("li", &["style"]);
+    builder.add_tag_attributes("dl", &["style"]);
+    builder.add_tag_attributes("dt", &["style"]);
+    builder.add_tag_attributes("dd", &["style"]);
+    builder.add_tag_attributes("table", &["style"]);
+    builder.add_tag_attributes("thead", &["style"]);
+    builder.add_tag_attributes("tbody", &["style"]);
+    builder.add_tag_attributes("tfoot", &["style"]);
+    builder.add_tag_attributes("tr", &["style"]);
+    builder.add_tag_attributes("td", &["style"]);
+    builder.add_tag_attributes("th", &["style"]);
+    builder.add_tag_attributes("a", &["style"]);
+    builder.add_tag_attributes("img", &["style"]);
+    builder.add_tag_attributes("video", &["style"]);
+    builder.add_tag_attributes("audio", &["style"]);
+    builder.add_tag_attributes("source", &["style"]);
+    builder.add_tag_attributes("iframe", &["style"]);
+    builder.add_tag_attributes("sup", &["style"]);
+    builder.add_tag_attributes("sub", &["style"]);
+    builder.add_tag_attributes("time", &["style"]);
+    builder.add_tag_attributes("var", &["style"]);
+    builder.add_tag_attributes("del", &["style"]);
+    builder.add_tag_attributes("ins", &["style"]);
+    builder.add_tag_attributes("br", &["style"]);
+    builder.add_tag_attributes("wbr", &["style"]);
+    builder.add_tag_attributes("form", &["style"]);
+    builder.add_tag_attributes("input", &["style"]);
+    builder.add_tag_attributes("textarea", &["style"]);
+    builder.add_tag_attributes("select", &["style"]);
+    builder.add_tag_attributes("option", &["style"]);
+    builder.add_tag_attributes("button", &["style"]);
+    builder.add_tag_attributes("label", &["style"]);
+    builder.add_tag_attributes("fieldset", &["style"]);
+    builder.add_tag_attributes("legend", &["style"]);
+    builder.add_tag_attributes("blockquote", &["style"]);
+    builder.add_tag_attributes("font", &["style"]); // deprecated
+    builder.add_tag_attributes("center", &["style"]); // deprecated
+    builder.add_tag_attributes("big", &["style"]); // deprecated
+    builder.add_tag_attributes("tt", &["style"]); // deprecated
     builder
 });
 
@@ -225,7 +291,9 @@ pub fn get_post_by_slug(slug: &str) -> Result<Post, Box<dyn std::error::Error>>
                 // Strip emojis before slugifying for the id
                 let heading_no_emoji = strip_emojis(&heading_text);
                 let id = slugify(&heading_no_emoji);
-                events.push(Event::Html(CowStr::Boxed(format!("<h{lvl} id=\"{id}\">", lvl=heading_level, id=id).into_boxed_str())));
+                // Add basic CSS style for headings
+                let style = "color: #2d3748; margin-top: 1.5em; margin-bottom: 0.5em;";
+                events.push(Event::Html(CowStr::Boxed(format!("<h{lvl} id=\"{id}\" style=\"{style}\">", lvl=heading_level, id=id, style=style).into_boxed_str())));
                 events.push(Event::Text(CowStr::Boxed(heading_text.clone().into_boxed_str())));
                 events.push(Event::Html(CowStr::Boxed(format!("</h{lvl}>", lvl=heading_level).into_boxed_str())));
             },
@@ -245,13 +313,13 @@ pub fn get_post_by_slug(slug: &str) -> Result<Post, Box<dyn std::error::Error>>
                 // Highlight code block
                 let highlighted = if !code_block_lang.is_empty() {
                     if let Some(syntax) = ss.find_syntax_by_token(&code_block_lang) {
-                        highlighted_html_for_string(&code_block_content, &ss, syntax, theme).unwrap_or_else(|_| format!("<pre><code>{}</code></pre>", html_escape::encode_text(&code_block_content)))
+                        highlighted_html_for_string(&code_block_content, &ss, syntax, theme).unwrap_or_else(|_| format!("<pre style=\"background: #2d2d2d; color: #f8f8f2; padding: 1em; border-radius: 6px; overflow-x: auto;\"><code style=\"background: none;\">{}</code></pre>", html_escape::encode_text(&code_block_content)))
                     } else {
-                        format!("<pre><code>{}</code></pre>", html_escape::encode_text(&code_block_content))
+                        format!("<pre style=\"background: #2d2d2d; color: #f8f8f2; padding: 1em; border-radius: 6px; overflow-x: auto;\"><code style=\"background: none;\">{}</code></pre>", html_escape::encode_text(&code_block_content))
                     }
                 } else {
                     // No language specified
-                    format!("<pre><code>{}</code></pre>", html_escape::encode_text(&code_block_content))
+                    format!("<pre style=\"background: #2d2d2d; color: #f8f8f2; padding: 1em; border-radius: 6px; overflow-x: auto;\"><code style=\"background: none;\">{}</code></pre>", html_escape::encode_text(&code_block_content))
                 };
                 events.push(Event::Html(CowStr::Boxed(highlighted.into_boxed_str())));
             },

posts/welcome.md

@@ -416,11 +416,12 @@ If you have seen this is not very mindfull of browser resources tho.
 |-------|----|
 |<span style="color:green;">Done</span>|**Rust Parser for Markdown**|
 |<span style="color:lightblue;">LTS</span>|_Long Term Support and upkeep_|
+|<span style="color:red;">Not Done</span>|Full Inline _CSS_ Support for **HTML**|
 ---
 
 ## <font color="red">R</font><font color="orange">e</font><font color="yellow">c</font><font color="green">e</font><font color="blue">n</font><font color="purple">t</font> <font color="red">C</font><font color="orange">h</font><font color="yellow">a</font><font color="green">n</font><font color="blue">g</font><font color="purple">e</font><font color="red">s</font>
 
-<img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Original_Ferris.svg" style="height:50;width:90;display:block;margin:0 auto;" alt="cute lil guy">
+<img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Original_Ferris.svg" style="height:50px;width:90px;display:block;margin:0 auto;" alt="cute lil guy">
 <br />
 
 If you have noticed the Project has switched to a more reliable and _faster_ **Rust** Markdown-Parser!