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>

<button id="toggleThemeBtn">코드 테마 변경</button>
<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>
<p style="margin: 16px 0px; display: block; overflow-wrap: break-word;">코드 하이라이트가 적용된 코드를 보려면 미리보기 버튼을 클릭해 주세요.<br></p>
</div>
<script>
    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-dark.min.css", "/se/resource/synapeditor/plugins/codeBlockHighlighter/themes/atom-one-light.min.css"]
    });

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

    let isLight = true;

	dlet isLight = true;

document.getElementById('toggleThemeBtn').addEventListener('click', () => {
	console.log('버튼 눌림');  	// 여기서const editor의iframe iframe을 가져오기
	// 이후 head에 css설정을 하는데, 
	// 버튼에 따라서 disable, 하기= editor.__getPreviewIframe__();
    if (!iframe) return;

    const doc = window.editor.getContentsManager()iframe.contentDocument || iframe.contentWindow.document;

    const headlinks = doc.head;querySelectorAll(
     // 기존 hljs 테마 제거
    head.querySelectorAll('link[data-hljs-theme]')
   'link[href*="atom-one-light.min.css"], link[href*="atom-one-dark.min.css"]'
    );

    links.forEach(link => link.remove());

    // 새 테마 추가{
        const linkisLightTheme = doclink.href.createElementincludes('linkatom-one-light');
  
 link.rel = 'stylesheet';     link.hrefdisabled = isLight
        ? '/se/resource/synapeditor/plugins/codeBlockHighlighter/themes/atom-one-dark.min.css'
 !isLightTheme : isLightTheme;
      : '/se/resource/synapeditor/plugins/codeBlockHighlighter/themes/atom-one-light.min.css'});

    isLight = !isLight;
});


</script>