feat(lab): Draft view pretty ok now

packages/freesewing.shared/components/mdx/highlight.js

@@ -4,14 +4,23 @@ const names = {
   js: 'javascript',
   bash: 'bash',
   sh: 'shell',
+  json: 'JSON',
+  yaml: 'YAML',
 }
 
 const Highlight = (props) => {
 
-  const language = props.children
+  const language = props.language
+    ? props.language
+    : props.children
     ? props.children.props.className.split('-').pop()
     : 'txt'
 
+  const preProps = {
+    className: `language-${language} hljs text-base lg:text-lg whitespace-pre-wrap break-words`
+  }
+  if (props.raw) preProps.dangerouslySetInnerHTML = { __html: props.raw }
+
   return (
     <div className="hljs my-4">
       <div className={`
@@ -24,7 +33,7 @@ const Highlight = (props) => {
         <span>{names[language] ? names[language] : language}</span>
         <CopyToClipboard content={props.children} />
       </div>
-      <pre className={`language-${language} hljs text-base lg:text-lg whitespace-pre-wrap break-words`}>
+      <pre {...preProps}>
         {props.children}
       </pre>
     </div>