Elm语法高亮显示

我正在编写一个简单的应用程序，将语法突出显示的代码块。现在我使用highlightjs来为我做语法高亮。

为什么我打给highlightBlock不起作用?

对于细心的读者:我选择Model和Msg是完全荒谬的，因为我现在并不真正使用它们。

import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
main =
  Html.program
  { init = init
  , view = view
  , update = update
  , subscriptions = subscriptions
  }
-- Model
type alias Model = { state: Int }
init : (Model, Cmd Msg)
init = (Model 1, Cmd.none)
-- view
view : Model -> Html Msg
view model = div [ ] [ codesample ]
codesample : Html Msg
codesample = pre [ myStyle ] [ code [] [ Html.text thisCode ] ]
myStyle : Html.Attribute Msg
myStyle = Html.Attributes.style [("background-color", "#F0F0F0"), ("width", "500px")]
thisCode : String
thisCode = """
import Html exposing (..)
import Html.App as Html
import Html.Events exposing (..)
import Random
import Svg exposing (..)
main =
  Html.program
  { init = init
  , view = view
  , update = update
  , subscriptions = subscriptions
  }
"""
-- update

type Msg
  = Roll  | NewFace Int
update : Msg -> Model -> (Model, Cmd Msg)
update msg model = ( model , Cmd.none )
-- subscriptions
subscriptions : Model -> Sub Msg
subscriptions model = Sub.none

一旦调用highlightjs，我就走出了纯Elm的范围。我下载了Elm语法高亮包，并像下面这样调用了这个库，但是什么也没有…我怀疑端口是必要的(正如Slack上提到的)

<html>
<head>
<link rel="stylesheet" href="styles/solarized-dark.css">
<script src="highlight.pack.js"></script>
</head>
<body>
<div id="my-elm-block"></div>
<script src="block.js"></script>
<script>
  var node = document.getElementById("my-elm-block");
  var app  = Elm.Main.embed(node);
  hljs.highlightBlock(node);
</script>
</body>
</html>

由于某种原因，在调用embed之后直接调用Elm生成的DOM上的函数不起作用，但是如果您将它封装在一个很小的超时中，它就起作用了。把你的高亮线改成:

setTimeout(function() { hljs.highlightBlock(node); }, 1);

我已经用过好几次了，还没出过问题。

相关内容

最新更新

热门标签：