monaco-editor, higlightjs, markedjs, purifyjs, turndownjs를 활용한 마크다운 에디터입니다.

여러가지 오픈소스를 조합해 만들었으며 마크다운에 익숙한 개발자, vscode에 익숙한 개발자라면 사용하기 가장 편할것으로 생각됩니다.

모나코에디터는 vscode의 기반이 된 에디터이며, vscode에서 사용하는 멀티커서, 단축키, 코드하이라이트 기능 등을 그대로 활용할 수 있습니다.

코드하이라이트 작성을 vscode처럼 자동완성으로 도와주고, ctrl+k+f로 탭 및 정렬이 vscode처럼 지원되기때문에 코드하이라이트 작성이 무척이나 편할것으로 생각됩니다.

그누보드 용은 첨부된 파일을 받아주시고, 그 외에 곳에서 사용하려면 깃헙을 참고하세요.

https://github.com/ohah/mvmEditor

html로 변경되기에 굳이 뷰어는 필요 없으나 코드하이라이트 기능을 사용한다면 view.skin.php 페이지에서 별도의 하이라이트 기능을 사용하시려면 아래의 데모코드를 참고하여 수정하세요

[code]

//코드 하이라이트 사용시

<?php

$editor_url = G5_EDITOR_URL.'/'.$config['cf_editor'];

    add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/github-markdown.css">', 0);

    add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/hljs.default.min.css"', 0);

    add_javascript('<script src="'.$editor_url.'/js/highlight.min.js"></script>',0);

    add_javascript('<script src="'.$editor_url.'/js/mvmEditor.js"></script>',0);

    ?>

    <script>

        const viewer = new mvmEditorViewer('#bo_v_atc',{

            ele : "#bo_v_atc"

        });

    </script>

    <section id="bo_v_atc" class="markdown-body">

[/code]

[code]

//코드하이라이트 미사용시
$editor_url = G5_EDITOR_URL.'/'.$config['cf_editor'];

add_stylesheet('<link rel="stylesheet" href="'.$editor_url.'/css/github-markdown.css">', 0);
<section id="bo_v_atc" class="markdown-body">

[/code]