Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2021年1月30日に更新

Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)

ページ内で書いていること

当サイトのような Gatsby で記事を書いている方向けです。Markdown形式で記事を書いている時、文章の一部を装飾したくなることがあるかとおもいます。Markdown 標準だけでは毎回HTMLタグを書くのが面倒な内容をマークダウン装飾タグ( Markdown Decoration Tagas = MdDecTa; エムディーデクタ ) で代替できるものです。

Gatsby公式からはコチラ

表現できる例

文章に下線を引いたりマーカーを引いたりできます。 点線での下線を引いたり、一部を強調したりもできます。 キーボードっぽい装飾もできます。例えば、「Ctrl+cでコピー」 など。ボタンっぽい装飾が手軽に文章中に埋め込みます。

マークダウンでの書き方の例 出力内容
ここは{c-red}赤{/}になります ここはになります

例としてはこんな感じです。

利用のための手順

この文章装飾は拡張プラグインの「gatsby-remark-text-decoration」を使用します。

npm を使って、以下でインストールできます。

 
pluginインストール
npm install gatsby-remark-text-decoration

次に、Gatsby からプラグインを読込できるように、 gatsby-config.js に追加したプラグインを追加します。 書く場所は、'gatsby-transformer-remark' の plugins 配列の中です。

 
gatsby-config.js
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{/} Ctrl+c

クラスを指定

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

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

書き方の例 変換後の HTML 内容
{class-info}クラス装飾{/}です <span class='info'>クラス装飾</span>

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

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

 
色指定の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 としてのコンパイル時に行われるため、リリースされたページを表示するときの速度が落ちたりはしないです。

自前で class を指定する例

style の class を指定する例です。 用意されている装飾タグの {class-クラス名} でも同じことができます。

複数のクラス名を指定するときなど、複雑な内容を書くときは自前で拡張しても良いかも。

 
class指定のgatsby-config.js
{
  resolve: 'gatsby-remark-text-decoration',
  options: {
    addTags : {
      "mytag" : "class='mydecoration'"
    }
  }
},

Gatsby の中でスタイルのクラス「mydecoration」を設定していれば、 それを適用できます。

複雑な長いスタイルを埋め込むより、クラスでまとめたほうが使い勝手が良いなどの場合には重宝します。

なお、プラグインが標準でサポートしている装飾タグと同じ名前の装飾タグを追加すると、 自作の装飾タグの効果で上書きできます。

自前の装飾タグに変数を使う

以下の用に「${1}」という文字列を addTags の中の変換後の中身に記載すると、 {bg-文字列} と書いた内容が <span style='background-color: 文字列'> と HTML 出力されます。

 
背景色指定のgatsby-config.js
{
  resolve: 'gatsby-remark-text-decoration',
  options: {
    addTags : {
      "bg" : "style='background-color: ${1}'"
    }
  }
},

装飾タグをエスケープする

文章の中で、{u} のように、装飾タグの文字列をそのまま表示したい場合は、 「\{u\} 」のように「\」バックスラッシュを記号の前に記載することで エスケープすることができます。

確認した環境とバージョン

  • OS: Windows 10 Home, version 2004
  • node-js: v12.18.2
  • gatsby": 2.24.9
  • gatsby-transformer-remark: 2.6.59
  • react: 16.13.1

おわりに

こちらのプラグインは自作で当ブログ内で作っているものを、外に出してもあまり恥ずかしくないように、テストコードやら、実装コードをリファクタリングして 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
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Gatsby で build 時に「A page component must export a React component for it to be valid. Please make sure this file exports a React component:」のエラーがでる

#Gatsby✎ 2021-01-24
Gatsby で build する時に「A page component must export a React component for it to be valid. Please make sure this file exports a React component:」のエラーがでたときの解消法
広告領域
追従 広告領域
目次
Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)
Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)
ページ内で書いていること
ページ内で書いていること
表現できる例
表現できる例
利用のための手順
利用のための手順
修飾タグの一覧
修飾タグの一覧
装飾に指定できる色
装飾に指定できる色
装飾タグの書き方
装飾タグの書き方
下線やマーカーの装飾を使う
下線やマーカーの装飾を使う
キーボードっぽい装飾
キーボードっぽい装飾
クラスを指定
クラスを指定
自前で装飾タグを追加する
自前で装飾タグを追加する
自前で class を指定する例
自前で class を指定する例
自前の装飾タグに変数を使う
自前の装飾タグに変数を使う
装飾タグをエスケープする
装飾タグをエスケープする
確認した環境とバージョン
確認した環境とバージョン
おわりに
おわりに
非常に参考になったサイトさまや、参考文献など
非常に参考になったサイトさまや、参考文献など
ページの更新履歴
ページの更新履歴
Nodachisoft © 2020