【Markdown拡張記法】テキストを書くだけでフローチャートなどが作図できる「Mermaid」の導入方法

はじめに Mermaidは、簡単なテキストを書くだけでフローチャートやシーケンス図といったダイアグラムを動的に作成できるJavaScriptプラグインです。例えば、簡単なフローチャートを作図したい場合は以下のような構文を記述します。 flowchart LR A["Local Computer"] - ...

【Rails】UIkit - HTML editorを使って簡単にマークダウンエディターを実装

はじめに Ruby on RailsではAction Textという機能を使うことで簡単にリッチテキストエディターを実装することができます。 <iframe class="hatenablogcard" style="width:100%; height:155px; max-width:680px;" tit ...

【CSS】CSSだけでMarkdownのコードにファイル名をつける

はじめに Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。 <img data-src="https://i.imgur.com/xO6MLjc.png" class="lazyload ...

【Rails】Markdownで記事を書く!「Redcarpet + Rouge」の導入・使用方法

はじめに 当ポートフォリオサイトの記事投稿画面では、長らくRails6から導入されたAction Textを使っていました(Action Textについては下記の記事をご覧ください)。 <iframe class="hatenablogcard" style="width:100%;height:155px;" ...