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>

<style>
/* 전체 컨테이너 */
.theme-selector {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
	margin: 10px 0px;
    border: 1px solid #39B6B8;
    border-radius: 8px;
    background-color: #f4fbfb;
}

/* 라벨 */
.theme-label {
    font-size: 14px;
    font-weight: 500;
    color: #2f8f91;
}

/* 셀렉트 */
.theme-select {
    appearance: none; /* 기본 화살표 제거 */

    padding: 6px 34px 6px 12px;
    font-size: 14px;
    border-radius: 6px;
    border: 1px solid #39B6B8;
    background-color: #ffffff;
    color: #1f1f1f;
    cursor: pointer;

    /* 커스텀 화살표 */
    background-image:
        linear-gradient(45deg, transparent 50%, #39B6B8 50%),
        linear-gradient(135deg, #39B6B8 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}


/* focus */
.theme-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(57, 182, 184, 0.25);
}

/* optgroup */
.theme-select optgroup {
    font-weight: 600;
    color: #2f8f91;
}

.info{
	color: #2f8f91;
}
</style>



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

<div class="theme-selector">
    <span class="theme-label">코드 스타일</span>

    <select id="themeSelect" class="theme-select">
        <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:500px580px;">
        <div id="synapEditor">
	
			<p>JavaScript<br></p>
			<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! This is JavaScript"</span>);
}</code></pre>
<p style="margin: 16px 0px; display: block; overflow-wrap: break-word;">코드 하이라이트가 적용된 코드를 보려면 미리보기 버튼을 클릭해 주세요.<br></p>
<p><button id="toggleThemeBtn">코드 테마 변경</button></p>
</div>
<script>
    const LIGHT_THEME = '/se/resource/synapeditor/plugins/codeBlockHighlighter/themes/atom-one-light.min.css';
    const DARK_THEME  = '/se/resource/synapeditor/plugins/codeBlockHighlighter/themes/atom-one-dark.min.css';

    let isLightTheme = true;

    const			<p><br></p>

			<p>C<br></p>
			<pre class="se-code-block"><code class="hljs"><span class="hljs-keyword">void</span> <span class="hljs-title function_">main</span>(<span class="hljs-params"></span>) {
    <span class="hljs-variable language_">printf</span>(<span class="hljs-string">"HI! This is C"</span>);
}</code></pre>
			<p><br></p>

			<p>JAVA<br></p>
<pre class="se-code-block"><code class="hljs"><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Main</span> {
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">main</span>(<span class="hljs-params"><span class="hljs-title class_">String</span>[] args</span>) {
        <span class="hljs-title class_">System</span>.<span class="hljs-variable static_">out</span>.<span class="hljs-title function_">println</span>(<span class="hljs-string">"HI! This is Java"</span>);
    }
}</code></pre>

			<p><br></p>


</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": [LIGHT_THEME"/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('toggleThemeBtnthemeSelect').addEventListener('clickchange', (e) => {
    const selectedTheme   isLightTheme = !isLightThemee.target.value;

    const links = window.editor
const themeUrl = isLightTheme ? LIGHT_THEME : DARK_THEME; 
		console.loggetElement(isLightTheme)
         // preview용 스타일 교체
        editor.setConfig.find('editor.preview.style.urls', [themeUrl]);se-contents-preview')
        .contents()
// preview가 열려 있다면 다시 렌더링   .find('link')
     if (editor.isPreviewMode && editor.isPreviewModetoArray());
{
    links.forEach(link => {
       editor.togglePreview();
  // 선택한 테마만 활성화
        link.disabled = editor.togglePreview(!link.href.includes(selectedTheme);
 
      });
    });


</script>