Nuxt Blog: Improve Posts Preview

How to improve the look of your post

By default frontmatter-markdown-loader compiles markdown with markdown-it. To override the default settings we pass a markdownIt object to the loader options in nuxt.config.js.

  build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.md$/,
        include: path.resolve(__dirname, 'content'),
        loader: 'frontmatter-markdown-loader',
        options: {
          markdownIt: {
            html: true,
            breaks: true,
            typographer:  true
          },
          mode: [Mode.VUE_COMPONENT, Mode.META]
        }
      })
    }
  },

The available options can be found here. The ones we will change in this instance are:

• html: true. Enable HTML tags in source
• breaks: true. Convert ‘\n’ in paragraphs into
  
• typographer: true. Enable some language-neutral replacement and quotes beautification
• highlight: function. Provide a highlighter function.