iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 19
0
Modern Web

學會Elm寫前端系列 第 19

19 讓elm看懂Markdown

  • 分享至 

  • xImage
  •  

Markdown

除了可以parse html,css之外,還有一個很常用的格式markdown,譬如這個鐵人賽的編輯器就是要你寫markdown,會幫你parse成html。elm也有這個一個套件elm-markdown裡面也很簡單,就只有一個function叫 toHtml

content : Html msg
content =
   Markdown.toHtml [class "content"] """

# Apple Pie Recipe

  1. Invent the universe.
  2. Bake an apple pie.

"""

你也可以立刻用elm寫一個編輯器,讓你一邊輸入,一邊可以立刻得到html的結果:online-markdown-editor

-- 我有省略一些,這不是原來會動的code, 只是方便閱讀
module MarkdownEditor exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Markdown

type alias Model =
    { input : String }

type Msg =
    Input String


update : Msg -> Model -> (Model, Cmd Msg)
update msg {input} =
    case msg of
        Input newStr ->
            (Model newStr, Cmd.none)


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none



init : (Model, Cmd Msg)
init =
  (Model defaultText, Cmd.none)


view : Model -> Html Msg
view model =
    div [ class "view" ]
        [ div [ class "jumbotron" ]
              [ div [ class "container" ]
                    [ h1 [ class "display-3" ]
                         [ text "Elm Markdown Editor" ]
                    , p [ class "lead" ]
                        [ text "This is an online markdown editor written in Elm." ]
                    , hr [ class "my-4"]
                         []
                    , p [ class "lead" ]
                        [ a [ class "btn btn-primary button-lg"
                            , href "https://github.com/3tty0n/elm-online-markdown-editor"
                            ] [ text "Source"]
                        , a [ class "btn btn-secondary button-lg"
                            , href "https://github.com/3tty0n"
                            ] [ text "Profile" ]
                        ]
                    ]
              ]
        , div [ class "view" ]
              [ div
                [ class "row panes"
                , panes
                ]
                [ div [ class "col-xs-1" ]
                      []
                , div [ class "col-md-5 edit"
                      , textArea
                      , row
                      ] [ textarea [ value model.input
                                   , onInput Input
                                   , class "inputarea"
                                   , inputArea
                                   , row
                                   ] []
                        ]
                , div [ class "col-md-5 display"
                      , display
                      , row
                      ] [ Markdown.toHtml [] model.input ]
                ]
              ]
        ]


main : Program Never Model Msg
main =
  program
    { init = init
    , update = update
    , view = view
    , subscriptions = subscriptions
}

view 裡頭,放了一個 onInput, 當你有新的輸入,就會呼叫 updateInput Msg,
讓你可以立刻看到你的markdown變成html。裡面就是使用這個 Markdown.toHtml


上一篇
18 elm 上使用websocket
下一篇
20 elm Q&A: 驚嘆號是什麼東西?
系列文
學會Elm寫前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言