Nodachisoft Nodachi Sword Icon

@Amaji✎ Update January -30-2021

Easily decorate markdown text in Gatsby (underline, highlight, bold, etc.)

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.

Example	Output	Browser View
This is {c-blue}Blue{/}	This is <span style='color: blue;'>Blue</span>	This is Blue

How to install

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

It can be installed using npm:

Install_plugin

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'.

gatsby-config.js

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


black	red	lime
orange	blue	brown

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.

Tag	Format	Example	Output
color	{c-color}	This is {c-blue}Blue{/}	This is Blue
Bold	{b}	{b}Here{/} is bold	Here is bold
Italic	{i}	{i}Here{/} is italic	Here is italic
Oblique	{o}	{o}Here{/} is oblique	Here is oblique
Underline	{u-color}	This is {u-pink}Pink underline{/}	This is Pink underlineです
Dotted Unerline	{udot-color}	This is {udot-red}Red line{/}.	This is Red line.
UnderMarker	{um-color}	{um-blue}Blue underline marker{/} here.	Blue underline marker here.
Marker pen	{m-color}	{m-#00aa00}Green Marker pen{/} here.	Green Marker pen here.

Keyboard-like decoration

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

Effect	Format	Example	Output
Keyboard like	{keybutton}	{keybutton}Ctrl{/}+{keybutton}c{/}	Ctrl+c

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.

Example	Converted HTML
{class-info}Here{/} is decorated.	<span class='info'>Here</span> is decorated.

Add your own decoration tags.

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

gatsby-config.js

{
  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.

Example	Converted HTML
This is {mytag}my dec tag {/}!	This is <span style='border-bottom: dotted 3px yellow;'>my dec tag</span>!

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.