Skip to content

Instantly share code, notes, and snippets.

@7shi 7shi/1.fs
Created Oct 15, 2019

Embed
What would you like to do?
[F#] Fable + KaTeX
open System
open Fable.Core
open Fable.Core.JsInterop
open Browser.Types
open Browser
// ref. https://medium.com/@zaid.naom/f-interop-with-javascript-in-fable-the-complete-guide-ccc5b896a59f
[<Emit("convert($0, $1)")>]
let render output (input:string): unit = jsNative
let matrix m = seq {
yield @"\left(\begin{matrix}"
for ms in m do
yield String.concat " & " ms + @" \\"
yield @"\end{matrix}\right)" }
seq {
let v = [["a"]; ["b"]; ["c"]]
let w = [["d" ; "e" ; "f"]]
yield! matrix v
yield! matrix w
yield "="
yield! v |> Seq.mapi (fun i r ->
w.[0] |> Seq.mapi (fun j c ->
if i = j then @"\text{内}" else @"\text{外}"
|> sprintf @"\underbrace{%s%s}_{%s}" r.[0] c))
|> matrix }
|> String.concat System.Environment.NewLine
|> render (document.getElementById "math")
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- ref. https://katex.org/docs/autorender.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
</script>
</head>
<body>
<div id="math"></div>
<script>
function convert(output, input) {
// ref. http://7shi.hateblo.jp/entry/2018/07/28/231859
try {
katex.render(input, output, { displayMode: true });
} catch (ex) {
output.textContent = ex.message;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.