What you write in the page

This is for people who write articles in Gatsby like this site. when you are writing an article in Markdown format, you may want to decorate some parts of the text.

Markdown Decoration Tags ( Markdown Decoration Tagas = MdDecTa ) can be used to replace HTML tags that are too cumbersome to write in Markdown standard.

Examples

You can underline and markers on sentences. You can also underline with dotted lines and emphasize part of the text . You can also create keyboard-like decorations.

For example, "Ctrl+c to copy". and so on. You can easily embed button-like decorations in your text.

How to install

This text decoration uses the extension plugin "gatsby-remark-text-decoration".

It can be installed using npm:

npm install gatsby-remark-text-decoration

Next, we need to add a plugin to gatsby-config.js so that Gatsby can load it.

The place to write this is in the plugins array for 'gatsby-transformer-remark'.

module.exports = {
   : 
  plugins: [
  　　:
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          　 :
          {            resolve: 'gatsby-remark-text-decoration',            options: {            }          },             :

List of Decoration tags (MdDecTa)

This is a list of Decoration tags(MdDecTa) that can be used with the plugin. You can also add your own modifier tags.

You can also nest modifier tags.

Colors that can be specified for decoration

Color names defined in CSS 1 to 4 can be used to specify colors.

The following are some examples of typical color names that I often use. When specifying a color in a decoration tag, it must be written in all lowercase.

The hexadecimal system is also acceptable.

Color Examples

How to write Decoration tags (MdDecTa)

The decoration tag is written as {DecorationTagName-color}.

{/}is the closing tag.

This will decorate the enclosed area.

Use underlining and marker decoration.

Keyboard-like decoration

You can use {keybutton} deco-Tag to create a keyboard-like decoration.

Specify the CSS class

Specifies a CSS class.

The class can be specified with . If you want to use your own pre-defined CSS class, use this tag.

Add your own decoration tags.

By adding to the gatsby-config.js configuration, You can add the style you want as a decoration tag.

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

Now the mytag decoration tag will be available.

It can be written in markdown as shown below.

The added extension tags will be converted to HTML when Gatsby renders. The style and other information you specified are inserted into the attribute part of the SPAN, HTML tag.

Also, all {/} will be converted to </span> closing decoration tags.

The tag conversion is done at compile time as Gatsby, so it won't slow down when displaying the released page.

Use variables for your own decoration tags.

If you put the string "${1}" in the converted content of addTags likes as follows

{
  resolve: 'gatsby-remark-text-decoration',
  options: {
    addTags : {
      "bg" : "style='background-color: ${1}'"
    }
  }
},

{bg-stringXXX} will be output as <span style='background-color: stringXXX'> in the HTML output.

Escaping decoration tags

If you want to display the string of the Decoration Tag as it is in the text, as in {u}

You can escape it by including a "" backslash in front of the symbol in the markdown, such as "\{u\}".

Environment and version checked

• 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

One last thing

This plugin was created by myself in this blog, and I refactored the test code and implementation code so that it would not be too embarrassing to publish it as OSS.

I'd be happy if it's of any use to you!

GitHub is here.

References

developer.Mozilla.org - CSS Color name

npmjs.com - gatsby-remark-text-decoration

www.gatsbyjs.com - gatsby-remark-text-decoration

Github - gatsby-remark-text-decoration

Page History