v1.2.1 (2020-06-07)

오랜만에 새로운 기능을 추가합니다. 이번에 추가된 기능은 코드블럭의 언어기능입니다.

markdown에서는 코드블럭에 언어를 지정할 수 있는데 rich 에디터에서는 이 지정된 언어가 사라지게 됩니다. 언어를 지원하지 않아 이미 지정된 언어도 무시되었기 때문입니다. 이번 업데이트를 통해서 지정된 언어는 무시되지 않게 되고 코드블럭 팝업에디터에서는 언어를 지정할 수 있게 됩니다.

```javascript
function hello(name) {
  console.log(`Hello, ${name}!`)
}
hello('world')
```

tinymce-plugin-codeblock

rich 에디터의 코드블럭은 tinymce-plugin-codeblock에 많은 부분을 의존하고 있습니다. 에디터상에서의 syntax highlight, 코드블럭 마크업의 구성, 코드블럭 코드의 에디팅은 모두 codeblock 플러그인이 수행하고 있습니다.

tinymce-plugin-codeblock@2.3.0 에서는 기존 <pre><code>에서 <pre><code class="language">로 마크업을 변경하고 이를 통해 언어를 저장, 감지하도록 변경했습니다. 코드블럭 에디터 팝업에서 표시되는 언어는 사용자가 지정할 수 있습니다.

codeblock: {
  langs: [
    { value: 'javascript', mode: 'javascript', label: 'Javascript' },
    { value: 'typescript', mode: 'javascript', label: 'Typescript' },
    { value: 'html', mode: 'xml', label: 'HTML' },
    { value: 'python', mode: 'python', label: 'Python' },
    { value: 'java', mode: 'clike', label: 'Java' },
    { value: 'go', mode: 'go', label: 'Go' },
    { value: 'Kotlin', mode: 'clike', label: 'Kotlin' },
    { value: 'clojure', mode: 'clojure', label: 'Clojure' },
  ]
}

위와 같이 langs에 사용하길 원하는 언어를 지정하면 팝업에서 사요할 수 있습니다. value는 사용할 언어, mode는 CodeMirror에서 사용할 mode, label은 select에 표시할 title입니다.