当サイトのような Gatsby で記事を書いている方向けです。Markdown形式で記事を書いている時、文章の一部を装飾したくなることがあるかとおもいます。Markdown 標準だけでは毎回HTMLタグを書くのが面倒な内容をマークダウン装飾タグ( Markdown Decoration Tagas = MdDecTa; エムディーデクタ ) で代替できるものです。
Gatsby公式からはコチラ。
文章に下線を引いたり、マーカーを引いたりできます。 点線での下線を引いたり、一部を強調したりもできます。 キーボードっぽい装飾もできます。例えば、「+でコピー」 など。ボタンっぽい装飾が手軽に文章中に埋め込みます。
| マークダウンでの書き方の例 | 出力内容 |
|---|---|
| ここは{c-red}赤{/}になります | ここは赤になります |
例としてはこんな感じです。
この文章装飾は拡張プラグインの「gatsby-remark-text-decoration」を使用します。
npm を使って、以下でインストールできます。
npm install gatsby-remark-text-decoration次に、Gatsby からプラグインを読込できるように、 gatsby-config.js に追加したプラグインを追加します。 書く場所は、'gatsby-transformer-remark' の plugins 配列の中です。
module.exports = {
: 略
plugins: [
: 略
'gatsby-transformer-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
: 略
{ resolve: 'gatsby-remark-text-decoration', options: { } }, : 略プラグインを入れて使用できる修飾タグの一覧です。 自分で修飾タグの追加もできます。
装飾タグは入れ子にすることも出来ます。
CSS 1 ～ 4 で定義されている Color name 150 色が指定できます。
私がよく使う代表的な色の名前 例を下に記載してみました。 装飾タグで色を指定する場合は、すべて小文字で記載する必要があります。
なお、16進数での書き方でも大丈夫です。
色の例
| black | red | lime |
| orange | blue | brown |
装飾タグの書き方は {装飾タグ名-色} です。{/} が閉じタグです。 これで囲んだ部分が装飾されます。
| 効果 | 書き方 | 書き方の例 | 出力内容 |
|---|---|---|---|
| 色 | {c-色} | {c-blue}青色{/}色です | 青色です |
| 太字 | {b} | {b}太字{/}です | 太字です |
| イタリック | {i} | {i}イタリック{/}です | イタリックです |
| 斜め文字 | {o} | {o}斜め文字{/}です | 斜め文字です |
| 下線 | {u-色} | {u-pink}桃色い下線{/}です | 桃色の下線です |
| 点線の下線 | {udot-色} | {udot-red}赤色の下線{/}です | 赤色の下線です |
| 下線マーカー | {um-色} | {um-blue}青色マーカーの下線{/}です | 青色マーカーの下線です |
| マーカー | {m-色} | {m-#00aa00}緑色マーカー{/}です | 緑色マーカーです |
{keybutton} でキーボードっぽい装飾ができます。
| 効果 | 書き方 | 書き方の例 | 出力内容 |
|---|---|---|---|
| キー | {keybutton} | {keybutton}Ctrl{/}+{keybutton}c{/} | + |
CSS のクラスを指定します。
{class-クラス名} でクラスを指定できます。自前で予め定義した CSS クラスを使用する場合は こちらを使用します。
| 書き方の例 | 変換後の HTML 内容 |
|---|---|
| {class-info}クラス装飾{/}です | <span class='info'>クラス装飾</span> |
gatsby-config.js の設定に追記することで、 自分が欲しいスタイルを装飾タグとして機能追加できます。
{
resolve: 'gatsby-remark-text-decoration',
options: {
addTags : {
"mytag" : "style='border-bottom: dotted 3px yellow;'"
}
}
},これで mytag の装飾タグが利用可能になります。
下のようにマークダウンで書くことができます。
| 書き方の例 | 変換後の HTML 内容 |
|---|---|
| これは{mytag}拡張タグ{/}です | これは <span style='border-bottom: dotted 3px yellow;'>拡張タグ</span>です |
この追加した拡張タグは、Gatsby のレンダリング時に HTML へ変換されます。指定したスタイルなどが、span の属性部分に差し込まれています。
また、{/} は全て </span> の閉じタグで変換されます。
タグ変換は Gatsby としてのコンパイル時に行われるため、リリースされたページを表示するときの速度が落ちたりはしないです。
style の class を指定する例です。 用意されている装飾タグの {class-クラス名} でも同じことができます。
複数のクラス名を指定するときなど、複雑な内容を書くときは自前で拡張しても良いかも。
{
resolve: 'gatsby-remark-text-decoration',
options: {
addTags : {
"mytag" : "class='mydecoration'"
}
}
},Gatsby の中でスタイルのクラス「mydecoration」を設定していれば、 それを適用できます。
複雑な長いスタイルを埋め込むより、クラスでまとめたほうが使い勝手が良いなどの場合には重宝します。
なお、プラグインが標準でサポートしている装飾タグと同じ名前の装飾タグを追加すると、 自作の装飾タグの効果で上書きできます。
以下の用に「${1}」という文字列を addTags の中の変換後の中身に記載すると、 {bg-文字列} と書いた内容が <span style='background-color: 文字列'> と HTML 出力されます。
{
resolve: 'gatsby-remark-text-decoration',
options: {
addTags : {
"bg" : "style='background-color: ${1}'"
}
}
},文章の中で、{u} のように、装飾タグの文字列をそのまま表示したい場合は、 「\{u\} 」のように「\」バックスラッシュを記号の前に記載することで エスケープすることができます。
こちらのプラグインは自作で当ブログ内で作っているものを、外に出してもあまり恥ずかしくないように、テストコードやら、実装コードをリファクタリングして OSS として公開したものです。
少しでもお役に立てれば嬉しいです！
GitHub はコチラ です。
(英語)npmjs.com - gatsby-remark-text-decoration
(英語)www.gatsbyjs.com - gatsby-remark-text-decoration
(英語)developer.Mozilla.org - CSS Color name
Github - gatsby-remark-text-decoration
| 更新日 | 更新内容 |
|---|---|
| 更新なし |
コメント、ありがとうございます。
ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。
Twitter:@NodachiSoft_jpお名前：以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください
お名前：
