【Markdown拡張記法】テキストを書くだけでフローチャートなどが作図できる「Mermaid」の導入方法
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/181/mermaid.png?X-Amz-Expires=600&X-Amz-Date=20240727T085014Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240727%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=c0e6e0ac7b0ecc3b63d2c73cf2ed07c87a86ebd80a8ac48d9db5ae9a362519b6)
はじめに
Mermaidは、簡単なテキストを書くだけでフローチャートやシーケンス図といったダイアグラムを動的に作成できるJavaScriptプラグインです。例えば、簡単なフローチャートを作図したい場合は以下のような構文を記述します。
flowchart LR
A["Local Computer"] - ...
【Rails】UIkit - HTML editorを使って簡単にマークダウンエディターを実装
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/141/rails.jpg?X-Amz-Expires=600&X-Amz-Date=20240727T085014Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240727%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=f286c0fe0470c81f325b882f75d037901874491c6f204749c4272447e3dd93b1)
はじめに
Ruby on RailsではAction Textという機能を使うことで簡単にリッチテキストエディターを実装することができます。
<iframe class="hatenablogcard" style="width:100%; height:155px; max-width:680px;" tit ...
【CSS】CSSだけでMarkdownのコードにファイル名をつける
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/140/html%2Bcss%2Bjs.png?X-Amz-Expires=600&X-Amz-Date=20240727T085014Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240727%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=3f8bb2f8f5a36a8e3e0aafa37dbd94f91ef70c0d68e0d8398135cbfb87cf9bfa)
はじめに
Markdownのコードに、そのコードがどのファイルのものなのかを示すためにファイル名が書いてあるとわかりやすいです。以下はQiitaの記事でコードを書いたときの一例です。
<img data-src="https://i.imgur.com/xO6MLjc.png" class="lazyload ...
【Rails】Markdownで記事を書く!「Redcarpet + Rouge」の導入・使用方法
![](https://autovice.s3.ap-northeast-1.amazonaws.com/uploads/article/picture/40/rails.jpg?X-Amz-Expires=600&X-Amz-Date=20240727T085014Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASDZCAGFGH4Y2EDPG%2F20240727%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=91f147415e1cfa83a961aa0713f230c558452b6dc8e6771080c58f873f3a5768)
はじめに
当ポートフォリオサイトの記事投稿画面では、長らくRails6から導入されたAction Textを使っていました(Action Textについては下記の記事をご覧ください)。
<iframe class="hatenablogcard" style="width:100%;height:155px;" ...
![](/assets/profile-1055d2f9a1a248bf051584d3572c2f2d79d103e956e0fcee48f1cab5cd40472b.jpg)
坂井 光太郎 / Sakai Kotaro
Ruby on Rails を中心とした Web アプリ開発全般に関する技術情報をまとめています。業務に関するご依頼・ご相談、当サイトに対するご感想やメッセージはコンタクトフォームからお気軽にお問い合わせください。