使用 Elm 进行语法高亮

Question

我正在编写一个简单的应用程序，其中放置了一个语法高亮的代码块。现在我正在使用 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>

Answer 1

出于某种原因，在调用 embed 之后直接调用由 Elm 生成的 DOM 上的函数不起作用，但如果将其包装在一个微小的超时中，它就会起作用。将您的突出显示行更改为：

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

我不得不多次使用这个 hack，但没有遇到任何问题。

使用 Elm 进行语法高亮

Syntax Highlighting with Elm

regex

jquery

syntax-highlighting

elm