客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：dillonkearns/elm-markdown开源软件地址(OpenSource Url)：https://github.com/dillonkearns/elm-markdown开源编程语言(OpenSource Language)：Elm 82.8%开源软件介绍(OpenSource Introduction)：elm-markdown
Extensible markdown parsing in pure elm. This library extends the basic markdown blocks without actually adding features to the syntax. It simply provides a declarative way to map certain HTML tags to your Elm view functions to render them. For example, <bio
name="Dillon Kearns"
photo="https://avatars2.githubusercontent.com/u/1384166"
twitter="dillontkearns"
github="dillonkearns"
>
Dillon really likes building things with Elm! Here are some links -
[Articles](https://incrementalelm.com/articles)
</bio>And you wire up your Elm rendering function like this Markdown.Html.oneOf
[ Markdown.Html.tag "bio"
(\name photoUrl twitter github dribbble renderedChildren ->
bioView renderedChildren name photoUrl twitter github dribbble
)
|> Markdown.Html.withAttribute "name"
|> Markdown.Html.withAttribute "photo"
|> Markdown.Html.withOptionalAttribute "twitter"
|> Markdown.Html.withOptionalAttribute "github"
|> Markdown.Html.withOptionalAttribute "dribbble"
]Note that it gets the rendered children as an argument. This is rendering the inner contents of the HTML tag using your HTML renderer, so you get all of your rendered lists, code blocks, links, etc. within your tag. You can try a live Ellie demo of this code snippet. Live Code Demos
Core featuresCustom RenderersYou define your own custom renderer, turning your markdown content into any data type with totally customizable logic. You can even pass back an Here's a snippet from the default HTML renderer that comes built in to give you a sense of how you define a import Html exposing (Html)
import Html.Attributes as Attr
import Markdown.Block as Block exposing (Block)
import Markdown.Html
defaultHtmlRenderer : Renderer (Html msg)
defaultHtmlRenderer =
{ heading =
\{ level, children } ->
case level of
Block.H1 ->
Html.h1 [] children
Block.H2 ->
Html.h2 [] children
Block.H3 ->
Html.h3 [] children
Block.H4 ->
Html.h4 [] children
Block.H5 ->
Html.h5 [] children
Block.H6 ->
Html.h6 [] children
, paragraph = Html.p []
, hardLineBreak = Html.br [] []
, blockQuote = Html.blockquote []
, strong =
\children -> Html.strong [] children
, emphasis =
\children -> Html.em [] children
, codeSpan =
\content -> Html.code [] [ Html.text content ]
, link =
\link content ->
case link.title of
Just title ->
Html.a
[ Attr.href link.destination
, Attr.title title
]
content
Nothing ->
Html.a [ Attr.href link.destination ] content
, image =
\imageInfo ->
case imageInfo.title of
Just title ->
Html.img
[ Attr.src imageInfo.src
, Attr.alt imageInfo.alt
, Attr.title title
]
[]
Nothing ->
Html.img
[ Attr.src imageInfo.src
, Attr.alt imageInfo.alt
]
[]
, text =
Html.text
, unorderedList =
\items ->
Html.ul []
(items
|> List.map
(\item ->
case item of
Block.ListItem task children ->
let
checkbox =
case task of
Block.NoTask ->
Html.text ""
Block.IncompleteTask ->
Html.input
[ Attr.disabled True
, Attr.checked False
, Attr.type_ "checkbox"
]
[]
Block.CompletedTask ->
Html.input
[ Attr.disabled True
, Attr.checked True
, Attr.type_ "checkbox"
]
[]
in
Html.li [] (checkbox :: children)
)
)
, orderedList =
\startingIndex items ->
Html.ol
(case startingIndex of
1 ->
[ Attr.start startingIndex ]
_ ->
[]
)
(items
|> List.map
(\itemBlocks ->
Html.li []
itemBlocks
)
)
, html = Markdown.Html.oneOf []
, codeBlock =
\block ->
Html.pre []
[ Html.code []
[ Html.text block.body
]
]
, thematicBreak = Html.hr [] []
, table = Html.table []
, tableHeader = Html.thead []
, tableBody = Html.tbody []
, tableRow = Html.tr []
, tableHeaderCell =
\maybeAlignment ->
let
attrs =
maybeAlignment
|> Maybe.map
(\alignment ->
case alignment of
Block.AlignLeft ->
"left"
Block.AlignCenter ->
"center"
Block.AlignRight ->
"right"
)
|> Maybe.map Attr.align
|> Maybe.map List.singleton
|> Maybe.withDefault []
in
Html.th attrs
, tableCell = \_ children -> Html.td [] children
, strikethrough = Html.span [ Attr.style "text-decoration-line" "line-through" ]
}
Markdown Block TransformationYou get full access to the parsed markdown blocks before passing it to a renderer. That means that you can inspect it, do custom logic on it, perform validations, or even go in and transform it! It's totally customizable, and of course it's all just nice Elm custom types! Here's a live Ellie example that transforms the AST into a table of contents and renders a Philosophy & Goals
Parsing GoalsThis is evolving and I would like input on the direction of parsing. My current thinking is that this library should:
Current Github-flavored markdown complianceThe test suite for this library runs through all the expected outputs outlined in the GFM spec. It uses the same test suite to test these cases as highlight.js (the library that You can see the latest passing and failing tests from this test suite in the Examples of fallback behaviorGithub flavored markdown behavior: Links with missing closing parens are are rendered as raw text instead of links [My link](/home/ wait I forgot to close the linkRenders the raw string instead of a link, like so: <p>
[My link](/home/ wait I forgot to close the link
</p>This library gives an error message here, and aims to do so in similar situations. ContributorsA huge thanks to Pablo Hirafuji, who was kind enough to allow me to use his InlineParser in this project. It turns out that Markdown inline parsing is a very specialized algorithm, and the
全部评论
专题导读
上一篇：zenn-dev/zenn-editor: Convert markdown to html in Zenn format发布时间：2022-08-18下一篇：JasKang/vite-plugin-md-preview: markdown vue code preview发布时间：2022-08-18热门推荐
热门话题
 阅读排行榜
|
请发表评论