gatsby-remark-text-decoration
マークダウン文章を手軽に装飾するために拡張タグを追加します。
インストール方法
npm install gatsby-remark-text-decoration --save-dev設定方法
プラグインの登録
gatsby-config.js に以下の設定を追加します。
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-text-decoration',
options: {
}
}
]
}
}
]下線やマーカーの装飾を使う例
| 効果 | 書き方 | 書き方の例 | 出力内容 |
|---|---|---|---|
| 色 | {c-色} | {c-blue}青色{/}色です | <span style=‘color: blue;‘>青色</span>です |
| 太字 | {b} | {b}太字{/}です | <span style=‘font-weight: bold;‘>太字</span>です |
| イタリック | {i} | {i}イタリック{/}です | <span style=‘font-style: italic;‘>イタリック</span>です |
| 斜め文字 | {o} | {o}斜め文字{/}です | <span style=‘font-style: oblique;‘>斜め文字</span>です |
| 下線 | {u-色} | {u-pink}桃色い下線{/}です | <span style=‘border-bottom: solid 2px pink;‘>桃色の下線</span>です |
| 点線の下線 | {udot-色} | {udot-red}赤色の下線{/}です | <span style=‘border-bottom: dotted 2px red;‘>赤色の下線</span>です |
| 下線マーカー | {um-色} | {um-blue}青色マーカーの下線{/}です | <span style=‘background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, blue 0%) repeat scroll 0 0;‘>青色マーカーの下線</span>です |
| マーカー | {m-色} | {m-#00aa00}緑色マーカー{/}です | <span style=‘background:rgba(0, 0, 0, 0) linear-gradient(transparent 0%, #00aa00 0%) repeat scroll 0 0;‘>緑色マーカー</span>です |
キーボードっぽい装飾
{keybutton} でキーボードっぽい装飾ができます。
クラスを指定
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 としてのコンパイル時に行われるため、リリースされたページを表示するときの速度が落ちたりはしないです。
自前の装飾タグに変数を使う
以下の用に「${1}」という文字列を addTags の中の変換後の中身に記載すると、 {bg-文字列} と書いた内容が <span style=‘background-color: 文字列’> と HTML 出力されます。
{
resolve: 'gatsby-remark-text-decoration',
options: {
addTags : {
"bg" : "style='background-color: ${1}'"
}
}
},装飾タグをエスケープする
文章の中で、{u} のように、装飾タグの文字列をそのまま表示したい場合は、 マークダウンの中で「\{u\} 」のように「\」バックスラッシュを記号の前に記載することで エスケープすることができます。
感想、改善点など
こちら https://nodachisoft.com/common/jp/contact/ からご連絡いただくか、twitter に DM 頂ければ喜びます！
お気軽にー。
Twitter: @NodachiSoft_jp
作者: Amaji