feat: new comrak

.github/workflows/biome-check.yaml

@@ -16,7 +16,7 @@ jobs:
         with:
           toolchain: stable
       - name: Check Rust code
-        run: cd markdown-renderer && cargo check
+        run: cd markdown-renderer && cargo check --features sanitize
       - name: Run Clippy
         run: cd markdown-renderer && cargo clippy -- -D warnings
       - name: Run Tests
@@ -42,7 +42,7 @@ jobs:
         if: steps.cache-wasm-pack.outputs.cache-hit != 'true'
         run: cargo install wasm-pack
       - name: Build Rust project
-        run: cd markdown-renderer && wasm-pack build --target web --release
+        run: cd markdown-renderer && wasm-pack build --target web --release --features sanitize
       - name: Set up Bun.js
         uses: oven-sh/setup-bun@v2
         with:

example/src/index.css

@@ -1467,3 +1467,100 @@
     border-color: var(--borderColor-default, #30363d);
   }
 }
+
+/* Responsive iframe and math styles for markdown content */
+.markdown-body iframe {
+  max-width: 100%;
+  border: none;
+}
+
+.markdown-body .math-code-block,
+.markdown-body .math-display,
+.markdown-body .math-inline {
+  overflow-x: auto;
+  max-width: 100%;
+  -webkit-overflow-scrolling: touch;
+  padding: 1rem 0;
+  /* Increased padding for all math blocks */
+  line-height: normal !important;
+}
+
+.markdown-body .math-code-block {
+  margin: 1.25rem 0;
+}
+
+.markdown-body .math-inline {
+  display: inline-block;
+  vertical-align: middle;
+  /* Middle is safer for multiline equations */
+  padding: 0.75rem 0 0.75rem 0;
+  /* Extra bottom padding for scrollbar */
+  max-width: 100%;
+  /* Maintain sharpness without forcing sub-pixel clipping */
+  backface-visibility: hidden;
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.markdown-body .math-code-block svg,
+.markdown-body .math-display svg,
+.markdown-body .math-inline svg {
+  max-width: none !important;
+  overflow: visible !important;
+  /* Anti-blur fixes */
+  shape-rendering: geometricPrecision !important;
+  image-rendering: -webkit-optimize-contrast !important;
+  transform: translateZ(0);
+}
+
+.markdown-body .math-code-block::-webkit-scrollbar,
+.markdown-body .math-display::-webkit-scrollbar,
+.markdown-body .math-inline::-webkit-scrollbar {
+  height: 4px;
+}
+
+.markdown-body .math-code-block::-webkit-scrollbar-track,
+.markdown-body .math-display::-webkit-scrollbar-track,
+.markdown-body .math-inline::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Show scrollbar thumb by default for visibility on mobile */
+.markdown-body .math-code-block::-webkit-scrollbar-thumb,
+.markdown-body .math-display::-webkit-scrollbar-thumb,
+.markdown-body .math-inline::-webkit-scrollbar-thumb {
+  background-color: rgba(var(--text-secondary-rgb), 0.3);
+  border-radius: 10px;
+}
+
+/* Increase visibility on hover */
+.markdown-body .math-code-block:hover::-webkit-scrollbar-thumb,
+.markdown-body .math-display:hover::-webkit-scrollbar-thumb,
+.markdown-body .math-inline:hover::-webkit-scrollbar-thumb,
+.markdown-body .math-code-block:active::-webkit-scrollbar-thumb,
+.markdown-body .math-display:active::-webkit-scrollbar-thumb,
+.markdown-body .math-inline:active::-webkit-scrollbar-thumb {
+  background-color: rgba(var(--text-secondary-rgb), 0.8);
+}
+
+.markdown-body .math-code-block::-webkit-scrollbar-thumb:hover,
+.markdown-body .math-display::-webkit-scrollbar-thumb:hover,
+.markdown-body .math-inline::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(var(--text-secondary-rgb), 1);
+}
+
+/* Firefox support */
+.markdown-body .math-code-block,
+.markdown-body .math-display,
+.markdown-body .math-inline {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--text-secondary-rgb), 0.3) transparent;
+}
+
+.markdown-body .math-code-block:hover,
+.markdown-body .math-display:hover,
+.markdown-body .math-inline:hover,
+.markdown-body .math-code-block:active,
+.markdown-body .math-display:active,
+.markdown-body .math-inline:active {
+  scrollbar-width: thin;
+}