From 88a647157da285fa1e4fff4a4cf4014408de1cd9 Mon Sep 17 00:00:00 2001 From: Patrick Stapfer Date: Tue, 8 Oct 2019 07:18:24 -0500 Subject: [PATCH] Make syntax highlighting work for signatures and examples --- components/CodeExample.bs.js | 21 +++++++---- components/CodeExample.re | 33 +++++++++++------- components/CodeSignature.bs.js | 19 ++++++---- components/CodeSignature.re | 16 +++++++-- components/Text.bs.js | 63 +++++++++------------------------ components/Text.re | 64 ++++++++-------------------------- pages/belt_docs/list.mdx | 2 ++ styles/_hljs.css | 2 -- 8 files changed, 93 insertions(+), 127 deletions(-) diff --git a/components/CodeExample.bs.js b/components/CodeExample.bs.js index 687e410b..97f7369a 100644 --- a/components/CodeExample.bs.js +++ b/components/CodeExample.bs.js @@ -2,18 +2,25 @@ import * as Util from "../common/Util.bs.js"; import * as React from "react"; +import * as ReactDOMRe from "reason-react/src/ReactDOMRe.js"; +import * as Highlight from "highlight.js/lib/highlight"; function CodeExample(Props) { - var children = Props.children; - var match = Props.lang; - var lang = match !== undefined ? match : /* Reason */825328612; - var langStr = lang >= 825328612 ? "RE" : "ML"; + var code = Props.code; + var lang = Props.lang; + var highlighted = Highlight.highlight(lang, code).value; + var children = ReactDOMRe.createElementVariadic("code", { + className: "hljs lang-" + lang, + dangerouslySetInnerHTML: { + __html: highlighted + } + }, /* array */[]); return React.createElement("div", { - className: "flex flex-col rounded-lg bg-main-black py-3 px-3 mt-10 overflow-x-auto" + className: "flex flex-col rounded-lg bg-main-black py-3 px-3 mt-10 overflow-x-auto text-lighter-grey" }, React.createElement("div", { className: "font-montserrat text-sm mb-3 font-bold text-primary-dark-10" - }, Util.ReactStuff.s(langStr)), React.createElement("div", { - className: "pl-3 text-base pb-4" + }, Util.ReactStuff.s(lang.toUpperCase())), React.createElement("div", { + className: "pl-5 text-base pb-4" }, children)); } diff --git a/components/CodeExample.re b/components/CodeExample.re index b987ccc5..09fcc4f3 100644 --- a/components/CodeExample.re +++ b/components/CodeExample.re @@ -1,21 +1,28 @@ open Util.ReactStuff; -type lang = [ | `Reason | `OCaml]; - [@react.component] -let make = (~children, ~lang=`Reason) => { - let langStr = - switch (lang) { - | `Reason => "RE" - | `OCaml => "ML" - }; -
+let make = (~code: string, ~lang) => { + let highlighted = HighlightJs.(highlight(~lang, ~value=code)->valueGet); + + let children = + ReactDOMRe.createElementVariadic( + "code", + ~props= + ReactDOMRe.objToDOMProps({ + "className": "hljs lang-" ++ lang, + "dangerouslySetInnerHTML": { + "__html": highlighted, + }, + }), + [||], + ); + +
- langStr->s -
-
- children + {Js.String2.toUpperCase(lang)->s}
+
children
; }; diff --git a/components/CodeSignature.bs.js b/components/CodeSignature.bs.js index 315e88f8..48e878a7 100644 --- a/components/CodeSignature.bs.js +++ b/components/CodeSignature.bs.js @@ -1,13 +1,18 @@ -import * as Util from "../common/Util.bs.js"; -import * as React from "react"; +import * as ReactDOMRe from "reason-react/src/ReactDOMRe.js"; +import * as Highlight from "highlight.js/lib/highlight"; function CodeSignature(Props) { - var children = Props.children; - return React.createElement("div", { - className: "font-bold" - }, Util.ReactStuff.s(children)); + var code = Props.code; + var lang = Props.lang; + var highlighted = Highlight.highlight(lang, code).value; + return ReactDOMRe.createElementVariadic("code", { + className: "font-bold hljs lang-" + lang, + dangerouslySetInnerHTML: { + __html: highlighted + } + }, /* array */[]); } var make = CodeSignature; @@ -16,4 +21,4 @@ export { make , } -/* Util Not a pure module */ +/* ReactDOMRe Not a pure module */ diff --git a/components/CodeSignature.re b/components/CodeSignature.re index 7d715ad0..95a0a59a 100644 --- a/components/CodeSignature.re +++ b/components/CodeSignature.re @@ -1,6 +1,18 @@ open Util.ReactStuff; [@react.component] -let make = (~children) => { -
children->s
; +let make = (~code, ~lang) => { + let highlighted = HighlightJs.(highlight(~lang, ~value=code)->valueGet); + + ReactDOMRe.createElementVariadic( + "code", + ~props= + ReactDOMRe.objToDOMProps({ + "className": "font-bold hljs lang-" ++ lang, + "dangerouslySetInnerHTML": { + "__html": highlighted, + }, + }), + [||], + ); }; diff --git a/components/Text.bs.js b/components/Text.bs.js index e58caef5..135ae1f9 100644 --- a/components/Text.bs.js +++ b/components/Text.bs.js @@ -4,12 +4,9 @@ import * as Util from "../common/Util.bs.js"; import * as React from "react"; import * as Caml_obj from "bs-platform/lib/es6/caml_obj.js"; import * as Belt_List from "bs-platform/lib/es6/belt_List.js"; -import * as ReactDOMRe from "reason-react/src/ReactDOMRe.js"; -import * as Caml_option from "bs-platform/lib/es6/caml_option.js"; import * as CodeExample from "./CodeExample.bs.js"; import * as ReasonReact from "reason-react/src/ReasonReact.js"; import * as CodeSignature from "./CodeSignature.bs.js"; -import * as Highlight from "highlight.js/lib/highlight"; var inline = "no-underline border-b border-main-black hover:border-bs-purple text-inherit"; @@ -167,55 +164,27 @@ function Text$Md$Code(Props) { } else { lang = "re"; } - var langClass = "lang-" + lang; - var baseClass = langClass + " font-mono block leading-tight"; + var baseClass = "font-mono block leading-tight"; var codeElement; - var exit = 0; - var exit$1 = 0; - switch (lang) { - case "re" : - case "reason" : - exit$1 = 2; - break; - default: - exit = 1; - } - if (exit$1 === 2) { - if (metastring !== undefined && metastring === "example") { - var highlighted = Highlight.highlight(lang, children).value; - var finalProps = Object.assign({ - className: baseClass + " hljs" - }, { - dangerouslySetInnerHTML: { - __html: highlighted - } - }); - codeElement = ReactDOMRe.createElementVariadic("code", Caml_option.some(finalProps), /* array */[]); - } else { - exit = 1; - } - } - if (exit === 1) { - codeElement = ReactDOMRe.createElementVariadic("code", { - className: baseClass - }, children); - } if (metastring !== undefined) { var metaSplits = Belt_List.fromArray(metastring.split(" ")); - if (Belt_List.has(metaSplits, "example", Caml_obj.caml_equal)) { - return React.createElement(CodeExample.make, { - children: codeElement - }); - } else if (Belt_List.has(metaSplits, "sig", Caml_obj.caml_equal)) { - return React.createElement(CodeSignature.make, { - children: children - }); - } else { - return codeElement; - } + codeElement = Belt_List.has(metaSplits, "example", Caml_obj.caml_equal) ? React.createElement(CodeExample.make, { + code: children, + lang: lang + }) : ( + 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)) + ); } else { - return codeElement; + codeElement = React.createElement("code", { + className: baseClass + }, Util.ReactStuff.ate(children)); } + return React.createElement("div", { + className: baseClass + }, codeElement); } var Code = { diff --git a/components/Text.re b/components/Text.re index aec20cc9..40f9cd6a 100644 --- a/components/Text.re +++ b/components/Text.re @@ -140,59 +140,25 @@ module Md = { | _ => "none" } }; - let langClass = "lang-" ++ lang; - let baseClass = langClass ++ " font-mono block leading-tight"; - - /* If there is a configured language for HLJS, - we use the highlight function to highlight the code, - which in this context is always a string parsed from - the markdown, otherwise we will just pass children down - without any modification */ + let baseClass = "font-mono block leading-tight"; let codeElement = - switch (lang, metastring) { - | ("re", Some("example")) - | ("reason", Some("example")) => - let highlighted = - HighlightJs.( - highlight(~lang, ~value=children->Obj.magic)->valueGet - ); - let finalProps = - Js.Obj.assign( - {"className": baseClass ++ " hljs"}, - { - "dangerouslySetInnerHTML": { - "__html": highlighted, - }, - }, - ); - ReactDOMRe.createElementVariadic( - "code", - ~props=ReactDOMRe.objToDOMProps(finalProps), - [||], - ); - | _ => - ReactDOMRe.createElementVariadic( - "code", - ~props=ReactDOMRe.objToDOMProps({"className": baseClass}), - children, - ) + switch (metastring) { + | None => children->ate + | Some(metastring) => + let metaSplits = + Js.String.split(" ", metastring)->Belt.List.fromArray; + + if (Belt.List.has(metaSplits, "example", (==))) { + Obj.magic} lang />; + } else if (Belt.List.has(metaSplits, "sig", (==))) { + Obj.magic} lang />; + } else { + children->ate ; + }; }; - switch (metastring) { - | None => codeElement - | Some(metastring) => - let metaSplits = - Js.String.split(" ", metastring)->Belt.List.fromArray; - - if (Belt.List.has(metaSplits, "example", (==))) { - codeElement ; - } else if (Belt.List.has(metaSplits, "sig", (==))) { - children->Obj.magic ; - } else { - codeElement; - }; - }; +
codeElement
; }; }; diff --git a/pages/belt_docs/list.mdx b/pages/belt_docs/list.mdx index 3542fcf4..58f131a7 100755 --- a/pages/belt_docs/list.mdx +++ b/pages/belt_docs/list.mdx @@ -534,6 +534,8 @@ let mapReverse2: (t('a), t('b), ('a, 'b) => 'c) => t('c); Equivalent to: `zipBy(xs, ys, f)->reverse` ```re example + +mapReverse2([1,3,4]); Belt.List.mapReverse2([1, 2, 3], [1, 2], (+)); /* [4, 2] */ ```` diff --git a/styles/_hljs.css b/styles/_hljs.css index 183740cb..f331c276 100644 --- a/styles/_hljs.css +++ b/styles/_hljs.css @@ -6,8 +6,6 @@ Docco style used in http://jashkenas.github.com/docco/ converted by Simon Madine .hljs { display: block; overflow-x: auto; - padding: 0.5em; - @apply text-lighter-grey; /*background: #f8f8ff;*/ }