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.

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

update modification
none
 
 
Message sent

Thank you for your message.

Something error has occured!

Sorry. The Error has occurred.We apologize for the inconvenience.Please try again in a few minutes or contact us via DM below.

Twitter:@NodachiSoft_eng
Name:
 
Replay To:
 
Message:
 
Back
Check the content!

Send the following information to us. If you are happy with your submission, please click "Send". If you want to modify it, please click "Back".

Name:
 
Reply To:
 
Message:
 
Enter a confirmation key to make sure that you are not operating from a Robot.
Confirmation Key is 95
Back
 / 
Go to Confirmation
Entry fields
Go to Confirmation

There are 1 articles that may be relevant!

How to solve "A page component must export a React component for it to be valid. Please make sure this file exports a React component:" error message when building with Gatsby

#Gatsby✎ 2021-01-24
How to solve "A page component must export a React component for it to be valid. Please make sure this file exports a React component:" error message when building with Gatsby
広告領域
追従 広告領域
Table Of Contents
Easily decorate markdown text in Gatsby (underline, highlight, bold, etc.)
Easily decorate markdown text in Gatsby (underline, highlight, bold, etc.)
What you write in the page
What you write in the page
Examples
Examples
How to install
How to install
List of Decoration tags (MdDecTa)
List of Decoration tags (MdDecTa)
Colors that can be specified for decoration
Colors that can be specified for decoration
How to write Decoration tags (MdDecTa)
How to write Decoration tags (MdDecTa)
Use underlining and marker decoration.
Use underlining and marker decoration.
Keyboard-like decoration
Keyboard-like decoration
Specify the CSS class
Specify the CSS class
Add your own decoration tags.
Add your own decoration tags.
Use variables for your own decoration tags.
Use variables for your own decoration tags.
Escaping decoration tags
Escaping decoration tags
Environment and version checked
Environment and version checked
One last thing
One last thing
References
References
Page History
Page History
Nodachisoft © 2020