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

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

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

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

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

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

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

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