
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.
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, "
+ to copy". and so on. You can easily embed button-like decorations in your text.Example Code | Output HTML | Browser View |
---|---|---|
This is {c-blue}Blue{/} |
This is <span style='color: blue;'>Blue</span> | This is Blue |
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: {
}
},
:
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.
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 |
The decoration tag is written as {DecorationTagName-color}.
{\}
is the closing tag.
This will decorate the enclosed area.
Tag | Format | Example MD Code | Output |
---|---|---|---|
Color Tag | {c-color}xxx{/} |
This is {c-blue}Blue{/}{/} |
This is Blue |
Bold Tag | {b}xxx{/} |
{b}Here{/} is bold |
Here is bold |
Italic Tag | {i}xxx{/} |
{i}Here{/} is italic |
Here is italic |
Oblique Tag | {o}xxx{/} |
{o}Here{/} is oblique |
Here is oblique |
Underline Tag | {u-color}xxx{/} |
This is {u-pink}Pink underline{/} . |
This is Pink underline. |
Dotted Unerline Tag | {udot-color}xxx{/} |
This is {udot-red}Red line{/} . |
This is Red line. |
UnderMarker Tag | {um-color}xxx{/} |
{um-blue}Blue underline marker{/} here. |
Blue underline marker here.` |
Marker pen Tag | {m-color}xxx{/} |
{m-#00aa00}Green Marker pen{/} here. |
Green Marker pen here.` |
You can use {keybutton}xxx{/}
deco-Tag to create a keyboard-like decoration.
Tag | Format | Example MD Code | Output |
---|---|---|---|
Keyboard-Like Tag | {keybutton} |
{keybutton}Ctrl{/}+{keybutton}c{/} |
+ |
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 MD Code | Converted HTML |
---|---|
{class-info}Here{/} is decorated. |
<span class='info'>Here</span> is decorated. |
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.
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}This is test{/}
will be output as <span style='background-color: stringXXX'>This is test</span>
in the HTML output.
If you want to display the string of the Decoration Tag as it is in the text, as in {u}
add backquote like: `{u}xxx{/}`
.
Software | Env1 | Env2 |
---|---|---|
OS | Windows 10 Home version 2004 |
Windows 10 Home Version 2004 |
node-js | v12.18.2 | v16.13.0 |
gatsby | v2.24.9 | v4.2.0 |
gatsby-transformer-remark | v2.6.59 | v5.2.0 |
react | v16.13.1 | v17.0.2 |
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.
update | modification |
---|---|
2021-Dec-12 | Checked at Gatsby v4 and updated plugin package.json |
Thank you for your message.
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_engName: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: