Page History

<!-- Synap Editor -->
<script src='/se/resource/synapeditor/synapeditor.config.js'></script>
<script src='/se/resource/synapeditor/synapeditor.min.js'></script>
<link href='/se/resource/synapeditor/synapeditor.min.css' rel='stylesheet' type='text/css'>

<!-- plugins -->
<script src="/se/resource/synapeditor/plugins/codeBlockHighlighter/codeBlockHighlighter.min.js"></script>

<h3>코드 하이라이트가 적용된 코드를 보려면 미리보기 버튼을 클릭해 주세요.</h3>

<div style="display: inline-flex; align-items: center; gap: 8px;">
    <div>코드 스타일을 선택하세요.</div>
    <select id="themeSelect">
    <optgroup label="GitHub">
        <option value="github">GitHub Light</option>
        <option value="github-dark">GitHub Dark</option>
    </optgroup>

    <optgroup label="Atom">
        <option value="atom-one-light">Atom One Light</option>
        <option value="atom-one-dark">Atom One Dark</option>
    </optgroup>

    <optgroup label="A11y">
        <option value="a11y-light">A11y Light</option>
        <option value="a11y-dark">A11y Dark</option>
    </optgroup>
</select>

</div>
<br>

<div style="background-color: #ffffff; width:99%; height:500px;">
        <div id="synapEditor">
			<pre class="se-code-block"><code class="hljs"><span class="hljs-keyword">function</span> <span class="hljs-title function_">foo</span>(<span class="hljs-params"></span>) {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"HI"</span>);
}</code></pre>
</div>


<script>
	// editor 기본 설정 start

    let config = Object.assign(synapEditorConfig, {
        "editor.license": "/se/resource/license.json",
        "editor.toolbar": [
            "new", "|",
            "codeBlock",
            "preview"
        ],
        "editor.menu.show": false,
        "editor.preview.style.urls": ["/se/resource/synapeditor/plugins/codeBlockHighlighter/themes/atom-one-light.min.css", 
		"/se/resource/synapeditor/plugins/codeBlockHighlighter/themes/atom-one-dark.min.css",
		"/se/resource/synapeditor/plugins/codeBlockHighlighter/themes/a11y-dark.min.css",
		"/se/resource/synapeditor/plugins/codeBlockHighlighter/themes/a11y-light.min.css",
		"/se/resource/synapeditor/plugins/codeBlockHighlighter/themes/github-dark.min.css",
		"/se/resource/synapeditor/plugins/codeBlockHighlighter/themes/github.min.css"
		]
    });

    window.editor = new SynapEditor(
        "synapEditor",
        config,
        document.getElementById('synapEditor').innerHTML
    );

	// editor 기본 설정 end

document.getElementById('themeSelect').addEventListener('change', (e) => {
    const selectedTheme = e.target.value;

    const links = window.editor
        .getElement()
        .find('.se-contents-preview')
        .contents()
        .find('link')
        .toArray();

    links.forEach(link => {
        // 선택한 테마만 활성화
        link.disabled = !link.href.includes(selectedTheme);
    });
});


</script>