Improve hljs colors, improve code rendering

rescript-association · Oct 8, 2019 · f32a6d1 · f32a6d1
1 parent 88a6471
commit f32a6d1
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/common/Mdx.re b/common/Mdx.re
@@ -30,7 +30,7 @@ module Components = {
         .
         "className": option(string),
         "metastring": option(string),
-        "children": array(ReasonReact.reactElement),
+        "children": ReasonReact.reactElement,
       }),
     [@bs.optional]
     pre: React.component(props),

diff --git a/components/Text.bs.js b/components/Text.bs.js
@@ -164,7 +164,6 @@ function Text$Md$Code(Props) {
   } else {
     lang = "re";
   }
-  var baseClass = "font-mono block leading-tight";
   var codeElement;
   if (metastring !== undefined) {
     var metaSplits = Belt_List.fromArray(metastring.split(" "));
@@ -175,15 +174,19 @@ function Text$Md$Code(Props) {
         Belt_List.has(metaSplits, "sig", Caml_obj.caml_equal) ? React.createElement(CodeSignature.make, {
                 code: children,
                 lang: lang
-              }) : React.createElement("code", undefined, Util.ReactStuff.ate(children))
+              }) : React.createElement(CodeExample.make, {
+                code: children,
+                lang: lang
+              })
       );
   } else {
-    codeElement = React.createElement("code", {
-          className: baseClass
-        }, Util.ReactStuff.ate(children));
+    codeElement = React.createElement(CodeExample.make, {
+          code: children,
+          lang: lang
+        });
   }
   return React.createElement("div", {
-              className: baseClass
+              className: "font-mono block leading-tight"
             }, codeElement);
 }
 

diff --git a/components/Text.re b/components/Text.re
@@ -141,20 +141,21 @@ module Md = {
           }
         };
 
+      let code = Unsafe.elementAsString(children);
       let baseClass = "font-mono block leading-tight";
       let codeElement =
         switch (metastring) {
-        | None => <code className=baseClass> children->ate </code>
+        | None => <CodeExample code lang />
         | Some(metastring) =>
           let metaSplits =
             Js.String.split(" ", metastring)->Belt.List.fromArray;
 
           if (Belt.List.has(metaSplits, "example", (==))) {
-            <CodeExample code={children->Obj.magic} lang />;
+            <CodeExample code lang />;
           } else if (Belt.List.has(metaSplits, "sig", (==))) {
-            <CodeSignature code={children->Obj.magic} lang />;
+            <CodeSignature code lang />;
           } else {
-            <code> children->ate </code>;
+            <CodeExample code lang />;
           };
         };
 

diff --git a/styles/_hljs.css b/styles/_hljs.css
@@ -14,6 +14,10 @@ Docco style used in http://jashkenas.github.com/docco/ converted by Simon Madine
   font-style: italic;
 }
 
+.hljs-operator, .hljs-literal {
+  @apply text-primary
+}
+
 .hljs-comment {
   @apply text-dark-green;
 }
@@ -55,7 +59,7 @@ Docco style used in http://jashkenas.github.com/docco/ converted by Simon Madine
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: #000080;
+  @apply text-info-blue;
   font-weight: normal;
 }