Page tree
Skip to end of metadata
Go to start of metadata

릴리즈 3.3.0 이상

코드 하이라이팅 플러그인을 적용하면 에디터에서 `getPublishingHtml()` 호출 시 하이라이팅이 될 수 있는 형태의 html이 반환됩니다.


사용방법

플러그인 파일 불러오기

<!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 -->
<script src="codeBlockHighlighter.min.js의 url"></script>

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

var synapEditorConfig = {
	...
	/**
	 * 미리보기에 스타일 url을 추가합니다.
     */
	'editor.preview.style.urls': [
		'코드 하이라이팅 테마.min.css의 url' // ex) '/dist/plugins/codeBlockHighlighter/themes/atom-one-light.min.css'
	]
	...
};

에디터 적용 예시

테마 적용 예시

테마 미적용 : 하이라이트 표시되지 않음

테마 미적용

atom-one-light 테마 적용

atom-one-dark 테마 적용

atom-one-light 테마 적용

atom-one-dark 테마 적용

  • No labels