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]
댓글 6개
게시글 목록
| 번호 | 제목 |
|---|---|
| 14082 | |
| 14058 | |
| 14056 | |
| 14047 | |
| 14035 | |
| 14026 | |
| 14019 | |
| 14012 | |
| 13997 | |
| 13988 | |
| 13975 | |
| 13969 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기