gatsby-remark-text-decoration

1.1.0 • Public • Published

gatsby-remark-text-decoration

Add decoration tags to the Gatsby markdown and you can decorate text easily.

How to install

npm install gatsby-remark-text-decoration --save-dev

Configuration

Registering plug-ins

Add the following settings to gatsby-config.js.

plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-text-decoration',
          options: {
          }
        }
      ]
    }
  }
]

Examples of using underline and marker decoration

Effect Format Example Output
color {c-color} This is {c-blue}Blue{/} This is <span style='color: blue;'>Blue</span>
Bold {b} {b}Here{/} is bold <span style='font-weight: bold;'>Here</span> is bold
Italic {i} {i}Here{/} is italic <span style='font-style: italic;'>Here</span> is italic
Oblique {o} {o}Here{/} is oblique <span style='font-style: oblique;'>Here</span> is oblique
Underline {u-color} This is {u-pink}Pink underline{/} This is <span style='border-bottom: solid 2px pink;'>Pink underline</span>です
Dotted Unerline {udot-color} This is {udot-red}Red line{/}. This is <span style='border-bottom: dotted 2px red;'>Red line</span>.
UnderMarker {um-color} {um-blue}Blue underline marker{/} here. <span style='background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, ${1} 0%) repeat scroll 0 0;'>Blue underline marker</span> here.
Marker pen {m-color} {m-#00aa00}Green Marker pen{/} here. <span style='background:rgba(0, 0, 0, 0) linear-gradient(transparent 0%, ${1} 0%) repeat scroll 0 0;'>Green Marker pen</span> here.

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 {class-ClassName}. 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.

{
  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\}".

Contact

Also, here is Reference : (https://nodachisoft.com/common/en/article/en000109/)[https://nodachisoft.com/common/en/article/en000109/]

If you DM me on twitter I'll be happy! Please feel free to contact me.

Twitter: @NodachiSoft_jp

Author: amaji

Package Sidebar

Install

npm i gatsby-remark-text-decoration

Weekly Downloads

3

Version

1.1.0

License

MIT

Unpacked Size

18.5 kB

Total Files

8

Last publish

Collaborators

  • amaji