Top header xs

3分でマークダウンエディターを作る【UIkit】


CSSのフレームワークであるUIkitを使用して簡単にマークダウンエディターを作成できます。

もちろんリアルタイムでマークダウンのプレビューが出るのでいちいち確認する必要はありません。

HTML editor component - UIkit documentation

HTML editor Create a rich HTML or markdown editor with an immediate preview and syntax highlighting. The HTML editor allows you to write in HTML or Markdown while it generates a real-time preview. It includes a toolbar that helps you to change text appearences and add links, pictures, blockquotes and lists without having to write code. The editor provides syntax highlighting for both HTML and Markdown and you can even toggle to fullscreen mode, so that you can work undisturbed on your content.


使い方

1. Ui KitとjQueryを読み込んであることを確認する。

2. Codemirrorとmarked.jsを読み込む。

3. さらにUI Kitのhtmleditor.cssとhtmleditor.jsを読み込む。

4. bodyタグ内で以下を追加。

<textarea data-uk-htmleditor="{markdown:true}"></textarea>



これだけです!通常はHTMLエディターで、マークダウンの際にはmarkdown:trueを指定するだけ。


cdnから以上の必要なライブラリをインポートしてtextareaを入れるだけでマークダウンエディターが完成です!3分で出来ますね。




githubにcdnで必要なライブラリをインポート済みのhtmlファイルを載せておきました。これをコピペさえすればマークダウンエディターが作れます。
30秒で作れますね笑

hirozak/markdown-editor

Contribute to markdown-editor development by creating an account on GitHub.


まとめ

このブログもこれを使って記事を書いています。簡単にエディターを作れるのでおすすめ。ただ、カスタマイズするのはちょっと面倒かもしれない。

他にもマークダウンエディターを作れるライブラリ等あるので調べてみるといいかも。

About Me

Profile image

hirozak

エンジニア

音楽, 映画, 海外ドラマ, ガジェット, インテリア, お酒が好きです。

詳しく見る

This Blog

このブログはhirozakがRuby on Railsで開発しました。

GitHubにて、ソースコードを公開しています。