Add support for formatting colors

Cargo.toml

@@ -41,9 +41,10 @@ color-eyre = "0.6.2"
 human-panic = "1.2.0"
 
 # Formatting
+hex = "0.4.3"
 html5ever = "0.26.0"
-markup5ever_rcdom = "0.2.0"
 html-escape = "0.2.13"
+markup5ever_rcdom = "0.2.0"
 
 # Internal
 enum_dispatch = "0.3.12"

src/html/mod.rs

@@ -20,10 +20,10 @@ use std::rc::Rc;
 use html5ever::driver::parse_fragment;
 use html5ever::interface::QualName;
 use html5ever::tendril::TendrilSink;
-use html5ever::{local_name, namespace_url, ns};
+use html5ever::{local_name, namespace_url, ns, Attribute};
 use html_escape::encode_text_minimal;
 use markup5ever_rcdom::{Handle, Node, NodeData, RcDom};
-use ratatui::style::{Style, Stylize};
+use ratatui::style::{Color, Style, Stylize};
 use ratatui::text::{Line, Span, Text};
 
 pub fn escape_html<S: ?Sized + AsRef<str>>(s: &S) -> Cow<'_, str> {
@@ -34,6 +34,20 @@ fn count_digits(n: u16) -> u8 {
   f32::log10(n.into()).floor() as u8 + 1
 }
 
+fn parse_hex_color(s: &str) -> Option<Color> {
+  // Should we implement a workaround for https://github.com/ratatui-org/ratatui/issues/475
+  // here, or wait for Crossterm to fix it?
+  let s = s.strip_prefix('#')?;
+  let a: [u8; 3] = hex::FromHex::from_hex(s).ok()?;
+  let a = [0, a[0], a[1], a[2]];
+  let n = u32::from_be_bytes(a);
+  Some(Color::Rgb(
+    (n >> 16) as u8,
+    ((n & 0xFF00) >> 8) as u8,
+    (n & 0xFF) as u8,
+  ))
+}
+
 #[derive(Clone, Debug, Default)]
 enum ListState {
   #[default]
@@ -88,6 +102,45 @@ fn format_tree(
       attrs,
       ..
     } => match name.as_ref() {
+      "font" | "span" => {
+        let mut state = state.to_owned();
+        for attr in attrs.borrow().iter() {
+          match attr {
+            Attribute {
+              name:
+                QualName {
+                  ns: ns!(html),
+                  local: name,
+                  ..
+                },
+              value,
+            }
+            | Attribute {
+              name:
+                QualName {
+                  ns: ns!(),
+                  local: name,
+                  ..
+                },
+              value,
+            } => match name.as_ref() {
+              "data-mx-color" => {
+                if let Some(color) = parse_hex_color(value.as_ref()) {
+                  state.style.fg = Some(color);
+                }
+              },
+              "data-mx-bg-color" => {
+                if let Some(color) = parse_hex_color(value.as_ref()) {
+                  state.style.bg = Some(color);
+                }
+              },
+              _ => {},
+            },
+            _ => {},
+          }
+        }
+        state
+      },
       "br" => {
         text.lines.push(Line::raw(state.padding.to_owned()));
         state.to_owned()