코드 하이라이터(highlight.js) 적용 및 플로라 에디터 연동

Color Scripter

Simple & Flexible Syntax HighLighter

https://colorscripter.com

컬러 스크립터 출력물은 얼추 이런느낌

코드 하이라이터 highlight.js

highlight.js

The Internet's favorite JavaScript syntax highlighter supporting Node.js and the web.

https://highlightjs.org

highlight.js 데모

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>Copy

1. 스타일

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/atom-one-dark.min.css">
<style>
    body {
        font-family: Arial, sans-serif;
        padding: 20px;
    }
    textarea {
        width: 100%;
        height: 200px;
        font-family: monospace;
        background-color: #1e1e1e;
        color: #dcdcdc;
        border: 1px solid #333;
        padding: 10px;
        margin-bottom: 20px;
        resize: vertical;
    }
    .highlighted-code {
        background: #282c34; /* Atom One Dark 테마와 일치하는 배경색 */
        padding: 20px;
        margin-top: 20px;
        border-radius: 5px;
        overflow-x: auto;
    }
</style>Copy

2. 본문

<div class="row">
    <div class="col-6">
        <textarea id="codeInput" placeholder="Enter your code here..."></textarea>
    </div>
    <div class="col-6">
        <div class="highlighted-code">
            <button class="copy-button" onclick="copyToClipboard()">Copy</button>
            <pre><code id="highlightedCode" class="hljs"></code></pre>
        </div>
    </div>
</div>Copy

3. 스크립트

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>
    const codeInput = document.getElementById('codeInput');
    const highlightedCode = document.getElementById('highlightedCode');

    codeInput.addEventListener('input', () => {
        // 코드 입력값을 텍스트로 설정
        const code = codeInput.value;
        highlightedCode.textContent = code;

        // highlightAuto로 자동 언어 감지 및 하이라이팅 적용
        const result = hljs.highlightAuto(code);
        highlightedCode.innerHTML = result.value;
    });

    function copyToClipboard() {
        navigator.clipboard.writeText(codeInput.value)
            .then(() => alert("Copied to clipboard!"))
            .catch(err => alert("Failed to copy: ", err));
    }
</script>Copy

4. 결과

좌측은 코드 입력단, 우측은 하이라이터된 코드 출력

플로라 에디터와 연동 작업

// 'highlightCode' 커맨드 정의
FroalaEditor.DefineIcon('highlightCode', { NAME: 'code', SVG_KEY: 'codeView' });
FroalaEditor.RegisterCommand('highlightCode', {
    title: 'Insert Highlighted Code',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
        editorInstance = this; // 현재 에디터 인스턴스 저장
        this.selection.save(); // 커서 위치 저장
        $('#highlightModal').modal('show');

        // 모달이 표시된 후 #codeInput에 포커스 설정
        $('#highlightModal').on('shown.bs.modal', function () {
            $('#codeInput').focus();
        });
    }
});Copy

new FroalaEditor(id, {

    ...

    toolbarButtons: {
        'moreText': {
            'buttons': ['strikeThrough', 'fontSize', 'bold', 'fontFamily', 'textColor', 'underline', 'clearFormatting'],
            'buttonsVisible': 1
        },
        'moreParagraph': {
            'buttons': ['alignLeft', 'alignCenter', 'paragraphFormat', 'alignRight', 'alignJustify', 'formatOL', 'formatUL'],
            'buttonsVisible': 3
        },
        'moreRich': {
            'buttons': ['insertImage', 'highlightCode', 'insertLink', 'insertTable', 'insertCode', 'insertHR'],
            'buttonsVisible': 3
        },
        'moreMisc': {
            'buttons': ['html'],
            'buttonsVisible': 1,
            'align': 'right'
        }
    },

    ....Copy

<div class="modal fade" id="highlightModal" tabindex="-1" aria-labelledby="highlightModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content" style="background-color: transparent; box-shadow: none;">
            <textarea id="codeInput" class="form-control" placeholder="Enter your code here..."></textarea>
            <button type="button" class="btn" onclick="insertHighlightedCode()">Insert</button>
        </div>
    </div>
</div>Copy

// 코드 하이라이팅 및 에디터에 삽입
function insertHighlightedCode() {
    const codeInput = document.getElementById('codeInput');
    if(codeInput.value === '') {
        toast('입력된 코드가 없습니다.', TOAST_WARNING);
        return false;
    }
    const highlightedCode = hljs.highlightAuto(codeInput.value).value;
    const codeHtml = `<pre><code class="hljs">${highlightedCode}</code><span class="hljs-ctc">Copy</span></pre><div><br></div>`;

    // Froala Editor에 HTML 삽입
    if (editorInstance) {
        editorInstance.selection.restore(); // 저장된 커서 위치로 복원
        editorInstance.html.insert(codeHtml); // 현재 커서 위치에 HTML 삽입
    }

    // codeInput 내용 초기화
    codeInput.value = '';

    // 모달 닫기
    $('#highlightModal').modal('hide');
}Copy

코드 하이라이터 스타일 변경 비교

이전 하이라이팅

개선 하이라이팅