Support for rehype plugins about content HOT 7 CLOSED

@juliomrqz Thanks for your explanation.

Will work on it soon then!

from content.

Thank you for your comments and feedback @juliomrqz ☺️

Beautiful website BTW!

from content.

Hey @juliomrqz,

We're considering this option indeed.

Juste to make sure, do you have any example of something you can do with a rehype plugin but not with remark?

Thanks!

from content.

In my blog, I use math equations in TeX format (an example article here https://marquez.co/blog/probabilities-and-uncertainty). The easy way to support this, it's using an official remark plugin remark-math, but it's required to use one of these official rehype plugins to work properly: rehype-katex or rehype-mathjax.

I managed to make them work with the latest version of @nuxt/content but I had to apply this hack for rehype-katex:

// nuxt.config.js
import rehypeKatex from 'rehype-katex'
import visit from 'unist-util-visit'

export default {
  //....
  hooks: {
    'content:file:beforeInsert': (document) => {
      if (document.extension === '.md') {
        const transformMath = rehypeKatex()

        visit(document.body, 'element', (element) => {
          element.properties = element.props
        })

        transformMath(document.body)

        visit(document.body, 'element', (element) => {
          element.props = element.properties
          element.tag = element.tagName || element.tag

          delete element.properties
          delete element.tagName
        })
      }
    },
  },
  //...
}

Fortunately, for this case, it was not a complicated hack.

Other rehype plugins can improve the developer's experience, for example:

• If you want to add TailwindCSS classes for some HTML tags, you can easily use rehype-add-classes
• For advanced HTML minifications, rehype-minify seems to be a good choice.

from content.

@benjamincanac. Another example is to easily support responsive tables if it's being used a bootstrap-lie approach https://getbootstrap.com/docs/4.5/content/tables/#responsive-tables

// nuxt.config.js
export default {
  content: {
    rehypePlugins: ["rehype-wrap", "rehype-add-classes"],
    rehypeWrap: {
      selector: "table",
      wrapper: "div.table-responsive",
    },
    rehypeAddClasses: {
      table: "table table-hover",
    },
  },
};

Maybe this example can be included in the Docs for advanced usage.

from content.

In nuxt/content v1.14.0, rehype-add-classes worked well with the following writing style.

// nuxt.config.js
export default {
  content: {
    markdown: {
      rehypePlugins: [
        ['rehype-add-classes', { table: 'table' }]
      ]
    }
  },
}

#45 (comment)

from content.

Just as a side node for others looking on how to use the rehype-wrapplugin with nuxt: It does only wrap the first occurrence. so the table example will only wrap the first table in a content document.

from content.