Skip to content

Commit

Permalink
Make syntax highlighting work for signatures and examples
Browse files Browse the repository at this point in the history
  • Loading branch information
ryyppy committed Oct 8, 2019
1 parent a61fc37 commit 88a6471
Show file tree
Hide file tree
Showing 8 changed files with 93 additions and 127 deletions.
21 changes: 14 additions & 7 deletions components/CodeExample.bs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}

Expand Down
33 changes: 20 additions & 13 deletions components/CodeExample.re
Original file line number Diff line number Diff line change
@@ -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"
};
<div className="flex flex-col rounded-lg bg-main-black py-3 px-3 mt-10 overflow-x-auto">
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,
},
}),
[||],
);

<div
className="flex flex-col rounded-lg bg-main-black py-3 px-3 mt-10 overflow-x-auto text-lighter-grey">
<div
className="font-montserrat text-sm mb-3 font-bold text-primary-dark-10">
langStr->s
</div>
<div className="pl-3 text-base pb-4">
children
{Js.String2.toUpperCase(lang)->s}
</div>
<div className="pl-5 text-base pb-4"> children </div>
</div>;
};
19 changes: 12 additions & 7 deletions components/CodeSignature.bs.js
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -16,4 +21,4 @@ export {
make ,

}
/* Util Not a pure module */
/* ReactDOMRe Not a pure module */
16 changes: 14 additions & 2 deletions components/CodeSignature.re
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
open Util.ReactStuff;

[@react.component]
let make = (~children) => {
<div className="font-bold"> children->s </div>;
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,
},
}),
[||],
);
};
63 changes: 16 additions & 47 deletions components/Text.bs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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 = {
Expand Down
64 changes: 15 additions & 49 deletions components/Text.re
Original file line number Diff line number Diff line change
Expand Up @@ -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 => <code className=baseClass> children->ate </code>
| Some(metastring) =>
let metaSplits =
Js.String.split(" ", metastring)->Belt.List.fromArray;

if (Belt.List.has(metaSplits, "example", (==))) {
<CodeExample code={children->Obj.magic} lang />;
} else if (Belt.List.has(metaSplits, "sig", (==))) {
<CodeSignature code={children->Obj.magic} lang />;
} else {
<code> children->ate </code>;
};
};

switch (metastring) {
| None => codeElement
| Some(metastring) =>
let metaSplits =
Js.String.split(" ", metastring)->Belt.List.fromArray;

if (Belt.List.has(metaSplits, "example", (==))) {
<CodeExample> codeElement </CodeExample>;
} else if (Belt.List.has(metaSplits, "sig", (==))) {
<CodeSignature> children->Obj.magic </CodeSignature>;
} else {
codeElement;
};
};
<div className=baseClass> codeElement </div>;
};
};

Expand Down
2 changes: 2 additions & 0 deletions pages/belt_docs/list.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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] */
````
Expand Down
2 changes: 0 additions & 2 deletions styles/_hljs.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;*/
}

Expand Down

0 comments on commit 88a6471

Please sign in to comment.