gatsby-remark-text-decoration v1.1.0

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: {
          }
        }
      ]
    }
  }
]

下線やマーカーの装飾を使う例

キーボードっぽい装飾

{keybutton} でキーボードっぽい装飾ができます。

クラスを指定

CSS のクラスを指定します。

{class-クラス名} でクラスを指定できます。自前で予め定義した CSS クラスを使用する場合は こちらを使用します。

自前で装飾タグを追加する

gatsby-config.js の設定に追記することで、 自分が欲しいスタイルを装飾タグとして機能追加できます。

{
  resolve: 'gatsby-remark-text-decoration',
  options: {
    addTags : {
      "mytag" : "style='border-bottom: dotted 3px yellow;'"
    }
  }
},

これで mytag の装飾タグが利用可能になります。

下のようにマークダウンで書くことができます。

この追加した拡張タグは、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