코드블록 하이라이팅

3.3.0 버전부터 지원합니다.

코드 하이라이팅 플러그인이 적용되면, 에디터에서 getPublishingHtml()을 호출할 때 하이라이팅이 가능한 형태의 HTML이 반환됩니다.

사용 방법

플러그인 파일 불러오기

<!-- The SynapEditor object must exist for this to take effect,
     so include after the editor script files. -->
<script src="url of codeBlockHighlighter.min.js"></script>

코드 하이라이팅 테마 CSS 적용

코드 하이라이팅 CSS를 보기 페이지에 적용합니다. (패키지의 plugins/codeBlockHighlighter/themes에서 사용 가능한 CSS 테마 중 하나를 적용합니다.)

더 많은 스타일은 https://github.com/highlightjs/highlight.js/tree/main/src/styles 에서 확인할 수 있습니다.

var synapEditorConfig = {
    ...
    /**
     * Adds the style url to the preview.
     */
    'editor.preview.style.urls': [
        'url of code highlighting theme.min.css' // ex) '/dist/plugins/codeBlockHighlighter/themes/atom-one-light.min.css'
    ]
    ...
};

에디터 애플리케이션 예시

1.00

테마 적용 예제

테마가 적용되지 않음: 하이라이팅이 표시되지 않음

1.00

`atom-one-light` 테마 적용됨	`atom-one-dark` 테마 적용됨