More Markdown extensions

[gridsome]

More Markdown extensions

[mittalyashu]

Add the option for codegroup too.

[Dana94]

@Jiang-Li remark-toc worked for me.

After running npm install remark-toc, I added it to the plugins list.

remark: {
  plugins: [
    [ 'gridsome-plugin-remark-shiki', { theme: 'Material-Theme-Palenight', skipInline: true } ],
    'remark-toc'
  ]
 }

Then added this line to the top of my markdown file.

## Table of Contents

[danrocha]

Hi @noxify thanks for the help...
however, I believe it might be an issue with @gridsome/vue-remark (see #707 )

will keep trying....

[cypressious]

Has anyone got https://github.com/Nevenall/remark-containers working? I couldn't get it to work with or without vue-remark.

[RehanSaeed]

I figured out how to do TOC and custom containers. This should ideally be built in. Here is my gridsome.config.js:

plugins: [
        [
          'remark-containers',
          {
            default: false,
            custom: [
              {
                type: 'tip',
                element: 'div',
                transform: function(node, config, tokenize) {
                  return transformContainer(node, config, 'tip', 'p', "Tip");
                }
              },
              {
                type: 'warning',
                element: 'div',
                transform: function(node, config, tokenize) {
                  return transformContainer(node, config, 'warning', 'p', "Warning");
                }
              },
              {
                type: 'danger',
                element: 'div',
                transform: function(node, config, tokenize) {
                  return transformContainer(node, config, 'danger', 'p', "Warning");
                }
              },
              {
                type: 'details',
                element: 'details',
                transform: function(node, config, tokenize) {
                  return transformContainer(node, config, 'details', 'summary', "Details");
                }
              }
            ]
          }
        ],
        'remark-toc'
]

function transformContainer(node, config, type, element, defaultTitle) {
  node.data.hProperties = {
    className: `custom-block ${type}`
  };
  node.children.splice(0, 0, {
    type: 'paragraph',
    data: {
      hName: element,
      hProperties: {
        className: 'custom-block-title',
      },
    },
    children: [
      { type: 'text', value: config || defaultTitle }
    ]
  });
}

The sass for the containers which I adjusted:

.custom-block {
  margin: 0.8rem 0;

  .custom-block-title {
    font-weight: 600;
    line-height: 1.7;
  }

  p {
    margin-bottom: 0;
  }

  &.tip, &.warning, &.danger {
    padding: 1rem 1.4rem;
    border-left-width: .4rem;
    border-left-style: solid;
    margin-bottom: -0.32rem;
  }

  &.tip {
    background-color: #f3f5f7;
    border-color: #42b983;
  }

  &.warning {
    background-color: rgba(255,229,100,.3);
    border-color: darken(#ffe564, 35%);
    color: darken(#ffe564, 70%);

    .custom-block-title {
      color: darken(#ffe564, 50%);
    }
  }

  &.danger {
    background-color: #ffe6e6;
    border-color: darken(red, 20%);
    color: darken(red, 70%);

    .custom-block-title {
      color: darken(red, 40%);
    }
  }

  &.details {
    background-color: #eee;
    display: block;
    padding: 1rem 1.4rem;
    position: relative;

    summary {
      cursor: pointer;
      font-size: 1.2em;
      outline: none;
    }
  }

}

[IssueHuntBot]

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

[EldoranDev]

Would you want to have the exact same functonality as the vuepress plugins or something similar ?

VuePress ist using markdown-it so the plugins they use can not get used i guess.

If you would want to have the same functionality the toc-plugin of remark would not quite fit so we would need to work arount that by using mdast-util-toc directly ?

Same for the custom blocks, there is a plugin but its not quite the same as the markdown-it one.

[chadananda]

There is a nice list of Remark plugins here: https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins

How would one go about converting these into Gridsome Remark plugins?

[hjvedvik]

@chadananda Any Remark plugin should work with the Gridsome Remark transformer :)

[Jiang-Li]

I followed the instruction of Remark transformer, and added the remark-toc. But it doesn't work. Did anyone apply this before?

The remark-html-katex works, but I need to add import 'katex/dist/katex.min.css' in the script tag. I am wondering do I need a css for toc? If so, where is it? Thx!

[danrocha]

Trying to use remark-toc with @gridsome/vue-remark plugin and could not make it work:

    {
      use: '@gridsome/vue-remark',
      options: {
        typeName: 'Guide', // Required
        baseDir: './content/guides', // Where .md files are located
        pathPrefix: '/guides', // Add route prefix. Optional
        template: './src/templates/Guide.vue',
        plugins: ['remark-toc'],
      },
    },

In my markdown, added ## toc or ## Table of Contents as per instructions and they are ignored.

Has anyone else managed to make it work?

[noxify]

Hi @danrocha ,

My package is a bit outdated but the remark-toc plugin works fine for me.
I have tested it with the latest gridsome version and the remark-toc plugin works as expected.

Here my test setup:

• My content repository: https://github.com/noxify/gridsome-content-test
• My Gridsome repository: https://github.com/noxify/gridsome-preview
• Preview: https://gridsome-preview.ilovenox.now.sh/gitpost/c86b33a3520cbe232519ea0971fdbb5e

Hope that helps :)