마크다운 에디터를 5분으로 만드는 【Marked.js & highlight.js】

현재 Laravel에서 마크다운 에디터를 사용한 블로그를 개발 중입니다만, 비동기 마크다운 에디터를 만드는 방법이 상상보다 간단했기 때문에 공유.

결론으로는 Marked.js를 사용합니다.

완제품

5분 Ver



10분 ver(highlight.js 도입)

샘플

pc만 대응하고 있습니다.

병아리

먼저 Marked.js를 로드합니다.

CDN의 경우,

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

npm 사용의 경우

npm i marked

그럼

import marked from 'marked';

됩니다.

이번에는 다른 bootstrap4와 jQuery를로드합니다.
jQuery는 필수입니다.

<div class="row">
        <div class="col-5 m-1">
<!-- ここに入力-->
            <textarea name="article" id="markdown_editor_textarea" cols="30" rows="30" class="form-control"></textarea>
        </div>
        <div class="col-6 m-1 border">
<!-- ここに出力される -->
            <div id="markdown_preview"></div>
        </div>
    </div>

// マークダウンをプレビュー画面に表示する
$(function () {

  $('#markdown_editor_textarea').keyup(function () {
    var html = marked($(this).val());
    $('#markdown_preview').html(html);
  });
});

textarea id markdown_editor_textarea의 마크 다운을 감지하고 markdown_preview에 html로 반환하고 표시합니다.

모든 것은 marked 함수가 잘 하고 있어요.

이것만으로 완성입니다.

오션으로 만들기

그냥 수수한이므로 highlight.js와 CSS를 맞추고 갑니다.

h1 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 1px #96c2fe;
  padding: 0.2em 0.5em;
  color: #454545;
  margin-bottom: 20px;
}

h2 {
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
  margin-bottom: 20px;
}

h3 {
  color: #010079;
  text-shadow: 0 0 5px white;
  padding: 0.3em 0.5em;
  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px, #e9f4ff 3px, #e9f4ff 7px);
  margin-bottom: 20px;
}

pre {
  padding: 20px;
}

제목에 css를 붙였을 뿐이므로 여기는 중요하지 않습니다.

그런 다음 코드 하이라이터 highlight.js를 소개합니다.

highlight.js 소개

이번에는 CDN으로 읽었습니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/solarized-dark.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>

로드할 css는 highlight.js의 공식 demo 중에서 선택하십시오.

이번 holarized-dark.

npm의 경우

npm install highlight

import hljs from 'highlight.js';

로드 후,

// マークダウンをプレビュー画面に表示する
$(function () {
  marked.setOptions({
    // code要素にdefaultで付くlangage-を削除
    langPrefix: '',
    // highlightjsを使用したハイライト処理を追加
    highlight: function (code, lang) {
      return hljs.highlightAuto(code, [lang]).value
    }
  });
  $('#markdown_editor_textarea').keyup(function () {
    var html = marked($(this).val());
    $('#markdown_preview').html(html);
  });
});

marked.setOptions에서 읽을 때 처리를 수행합니다.

이제 코드가 강조 표시됩니다.

실물 공개

스마트 폰 미 대응입니다.

여러가지 놀아보세요.