GitHub - davedawkins/Fable.Formatting.Markdown: Port of FSharp.Formatting.Markdo...
source link: https://github.com/davedawkins/Fable.Formatting.Markdown
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Fable.Formatting.Markdown
A port of FSharp.Formatting.Markdown
for Fable. This will allow you to format markdown into HTML inside your Fable application.
The benefit of using this package over (say) markedjs is that we have the same formatting behaviour and syntax as FSharp.Formatting
, and of course a rich FSharp-first API for parsing markdown text into an intermediate document.
For documentation, refer to Markdown Parser. Note that in general FSharp.Formatting
in those documents is Fable.Formatting
in this package.
Fable Example
module App let markdownSrc = """ ##Markdown Example This is *italic*, and this is **bold**, and this is a `symbol`. **Unordered List** - Unordered item - Next item - Last item **Numbered List** 1. First step 1. Second step 1. Third step **Code** let fib n = if n <= 1 then 1 else n * (fib (n-1)) """ let appE = Browser.Dom.window.document.querySelector("#app") appE.innerHTML <- Fable.Formatting.Markdown.Markdown.ToHtml(markdownSrc)
Feliz Example
module Main open Feliz open Browser.Dom open Fable.Formatting.Markdown [<ReactComponent>] let MarkdownDiv (x:string) = Html.div [ prop.dangerouslySetInnerHTML (Markdown.ToHtml x) ] [<ReactComponent>] let app (md : string) = let (src, setSrc) = React.useState(md) Html.div [ MarkdownDiv src Html.textarea [ prop.value src prop.onChange (fun s -> setSrc(s)) ] ] ReactDOM.render( app "**Hello World** from *Markdown*", document.getElementById "feliz-app" )
Result:
Details of Port to Fable
-
Based on
FSharp.Formatting
v11.4.2
. Only theMarkdown
module has been ported across. -
Regex match groups don't have an Index property. The workaround I used is to specify captures for all of the expression and then sum the size of each preceding capture to get the start of the original capture we wanted.
-
Array.FindAll
- replaced withArray.filter
-
TextWriter/StringWriter
replaced withFableTextWriter
, which performs string concatenation
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK