Elm 앱 내에서 코드 강조 표시

Elm에서 슬라이드 자료를 만들거나, 함께 개발하는 사람을 위해 스타일 가이드나 유틸리티 함수 사용법 문서를 만들 때 등, Elm제 앱 중에서 코드를 강조 표시하고 싶은 경우가 있습니다.
이 기사에서는 Elm 앱에서 편리하게 코드 하이라이트를 수행하는 방법을 소개합니다.

Highlight.js

JS 로 코드 하이라이트를 실시하는 라이브러리라고 하면 highlight.js
이 방법은 페이지를 로드할 때 존재하는 DOM 요소 중에서 강조하려는 코드를 찾는데, Elm 앱의 경우 페이지를 로드할 때 DOM 요소가 아직 생성되지 않았기 때문입니다.

동적 요소 강조 표시

highlight.js 에는 Getting Started 라는 함수가 준비되어 있어 동적으로 생성되는 요소를 강조 표시할 수 있습니다.
그러나 강조하고 싶은 요소를 그릴 때마다 1 port에서이 함수를 호출하는 것은 너무 많은 노력이 필요합니다.

elm-explorations/markdown

여기서 initHighlightingOnLoad 의 등장입니다.
Elm 작자인 Evan은 즐겁기 때문에, 일반인에게는 허용되지 않는 비밀의 방법으로 JS 의 코드를 내부적으로 직접 실행할 수 있는 Elm 라이브러리를 작성해 공개할 권한을 가지고 있습니다.

elm-explorations/markdown 은 그런 즐거운 라이브러리 중 하나이며 내부적으로 highlight.js highlight 를 사용합니다.
본래의 용도로서는 Markdown 의 텍스트를 받아 Html.Html msg 로 변환하는 것입니다만,

    myCode : Html msg
    myCode =
        Markdown.toHtml []
            """
    ```elm
    view =
        Atom.row
            [ basicBlock
            ]

    ```
            """

이렇게하면 다음과 같은 DOM이 만들어집니다.

<pre><code class="lang-elm"><span class="hljs-title">view</span> =
    <span class="hljs-type">Atom</span>.row
        [ basicBlock
        ]
</code></pre>

이것을 브라우저로 표시하면 highlight(name, value, ignore_illegals, continuation) 과 같이 됩니다.

elm-explorations/markdown 사용법

실제로 사용할 때 elm-explorations/markdown이 highlight.js 자체를 포함하지는 않습니다.
단지 windows.hljs.highlight() 와 같은 형태로 highlight.js 의 함수가 windows.hljs 로서 사용할 수 있는 상태가 되어 있는 것을 상정하고 있습니다.

따라서 highlight.js가 제공하는 CSS 파일뿐만 아니라,
예를 들어 다음과 같은 방법으로 별도 highlight.js 를 읽어 둘 필요가 있습니다.

HTML 헤더 요소로 highlight.js 로드

Elm에서 highlight.js로드 (elm-explorations/markdown)

npm install 한 highlight.js 를 require 하거나 읽어 둔다 ( 강조 표시됩니다. )

또, toHtml 함수는 캐릭터 라인의 Parsing 를 실시하고 있는 관계입니다 문지름 무거운 처리가 되어 있습니다.Html.Lazy.lazy 등을 활용하여 불필요한 재평가가 일어나지 않도록 궁리하십시오.

보다 자세한 사용법에 대해서는,elm-explorations/markdown 를 사용해 스타일 가이드를 작성하고 있다 공식 패키지 사이트의 예 등도 참조해 주세요.

예
elm-atomic-design-example
사쿠라 찬에게 밥을 준다.
사쿠라 짱 더보기