🎨 Update HTML styles for buttons, kbd, etc. (#186)

Co-authored-by: Angus Hollands <goosey15@gmail.com>

Author: rowanc1

src/renderers.tsx

@@ -18,11 +18,12 @@ export const renderers: Record<string, NodeRenderer> = {
     if (sanitizer !== undefined) {
       return (
         <span
+          className="jp-RenderedHTMLCommon not-prose"
           dangerouslySetInnerHTML={{ __html: sanitizer.sanitize(node.value) }}
         ></span>
       );
     } else {
-      return <pre> {`${node.value}`} </pre>;
+      return <pre>{node.value}</pre>;
     }
   }
 };

style/preflight.css

@@ -5,7 +5,10 @@
 
 /* This is a highly simplified version of https://tailwindcss.com/docs/preflight to work with JupyterLab */
 
-.myst * {
+.myst
+  :where(*):not(
+    :where([class~='jp-RenderedHTMLCommon'], [class~='jp-RenderedHTMLCommon'] *)
+  ) {
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
@@ -21,17 +24,26 @@
 2. Remove default button styles.
 */
 
-.myst button {
+.myst
+  :where(button):not(
+    :where([class~='jp-RenderedHTMLCommon'], [class~='jp-RenderedHTMLCommon'] *)
+  ) {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */
 }
 
-.myst img {
+.myst
+  :where(img):not(
+    :where([class~='jp-RenderedHTMLCommon'], [class~='jp-RenderedHTMLCommon'] *)
+  ) {
   max-width: 100%;
 }
 
-.myst figure img {
+.myst
+  :where(figure img):not(
+    :where([class~='jp-RenderedHTMLCommon'], [class~='jp-RenderedHTMLCommon'] *)
+  ) {
   display: block;
   max-width: 100%;
 }