React (gatsby.js)에서 highlight.js 사용

구현

highlight.js를 추가합니다. 이번에는 ES6 이상으로 씁니다.
더욱 초보적인 곳을 알고 싶은 분은 이 블로그를 읽으십시오.

// npmモジュール追加
yarn add highlight.js

이번에는 코드 하이라이트를 사용할 기회가 기사의 페이지에서 밖에 사용하지 않기 때문에, Util적인 것은 구현하지 않고 직접 해당의 React Component에 돌진한다.useEffect 모르는 분은 여기을 확인하십시오.

Article/index.jsx

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/atom-one-dark.css';

hljs.registerLanguage('javascript', javascript);

const ArticleComponent = () => {
    useEffect(() => {
        hljs.initHighlighting();
    });
    return <Article />;
}

여기서 hljs.initHighlighting() 를 사용하십시오.hljs.initHighlightingOnLoad() 의 실태는 DOMContentLoaded 시에 initHighlighting() 를 호출하도록 addEventListener 하는 것뿐입니다.
그러나 아마도 React의 구조상 요소가 액세스 가능하게 되는 타이밍, 이른바 마운트가 되는 타이밍(componentDidMount)과 DOMContentLoaded의 타이밍이 같지 않기 때문에, 리스너가 있어도 하이라이트 처리가 React의 마운트시보다 전 에 달려 버리는 것 같습니다.
그래서 호출 할 때는 위와 같이 React를 마운트 할 때 initHighlighting를 실행하도록합니다.
그러면 이런 느낌으로 하이라이트 해줍니다. 왠지 자주 있는 하이라이트라고 생각했기 때문에 atom-one-dark.css 를 선택하고 있습니다. 이 예제의 스타일은 그것입니다.

또, 이번의 구현이라면 첫회 때만 하이라이트를 해 줍니다만, 첫회 이후 상기의 코드라면 하이라이트해 주지 않게 됩니다. 이것은 highlight.js의 인스턴스가 초기화 이후는 처리를 실행하지 않게 플래그를 사용해 텍스트의 퍼스 처리를 스킵 하고 있기 (위해)때문에입니다.
이번은 첫회 이후도 퍼스 해 주지 않으면 안되는 요건이므로 플래그를 접으러 갑니다.

Article/index.jsx

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/atom-one-dark.css';

hljs.registerLanguage('javascript', javascript);

const ArticleComponent = () => {
    useEffect(() => {
        hljs.initHighlighting();
        // React環境だと初回以降ハイライト処理が入らないため外部からフラグをfalseに
        hljs.initHighlighting.called = false;
    });
    return <Article />;
}

이런 느낌으로 실장하면 첫회 이후도 하이라이트 해 줍니다.
아웃로우한 구현이 되었습니다만, 이번은 이런 곳에서 문제 없게 움직이고 있으므로 개발을 종료했습니다.

공식 문서