VuePress：Markdownを設定変更やプラグイン追加によってカスタマイズする方法

module.exports = {
  markdown: {
    lineNumbers: true
  }
}

module.exports = {
  markdown: {
    anchor: {
      permalink: false
    }
  }
}

module.exports = {
  markdown: {
    anchor: {
      permalinkSymbol: '?'
    }
  }
}

module.exports = {
  markdown: {
    externalLinks: {
      target: ''
    }
  }
}

module.exports = {
  markdown: {
    externalLinks: {
      target: '',
      class: 'link'
    }
  }
}

module.exports = {
  markdown: {
    linkify: true
  }
}

module.exports = {
  markdown: {
    toc: {
      includeLevel: [2, 3, 4, 5, 6]
    }
  }
}

$ yarn add -D markdown-it-abbr

module.exports = {
  markdown: {
    config: md => {
      md.use(require('markdown-it-abbr'))
    }
  }
}

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specification is maintained by the W3C.

abbr {
  position: relative;
  &::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    display: inline-block;
    min-width: 200px;
    padding: .6em .8em;
    background: #3eaf7c;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    transform: translateX(-50%);
    transition: .2s;
    opacity: 0;
    visibility: hidden;
  }
  &:hover::after {
    bottom: 120%;
    opacity: 1;
    visibility: visible;
  }
}

$ yarn add -D markdown-it-footnote

module.exports = {
  markdown: {
    config: md => {
      md.use(require('markdown-it-footnote'))
    }
  }
}

あのイーハトーヴォ[^1]のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市[^2]、郊外のぎらぎらひかる草の波。
[^1]: これは1つ目の脚注です。
[^2]: これは2つ目の脚注です。

$ yarn add -D markdown-it-mark

module.exports = {
  markdown: {
    config: md => {
      md.use(require('markdown-it-mark'))
    }
  }
}

文章内の一部を==このようにハイライト表示==させることができます。

$ yarn add -D markdown-it-playground

module.exports = {
  markdown: {
    config: md => {
      md.use(require('markdown-it-playground'))
    }
  }
}

@[codepen](iframe src)
@[jsfiddle](iframe src)

$ yarn add -D markdown-it-video

module.exports = {
  markdown: {
    config: md => {
      md.use(require('markdown-it-video'))
    }
  }
}

@[youtube](movie id)
@[vimeo](movie id)

.embed-responsive {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

$ yarn add -D markdown-it-task-lists

module.exports = {
  markdown: {
    config: md => {
      md.use(require('markdown-it-task-lists'))
    }
  }
}

- [ ] primary
  - [ ] foo
  - [x] bar
  - [x] baz
- [ ] secondary
- [x] tertiary
- [x] quaternary
- [ ] quinary

.contains-task-list {
  padding-left: 0;
  list-style: none;
  ul {
    padding-left: 1.2em;
  }
}

$ yarn add -D markdown-it-task-fontawesome

module.exports = {
  head: [
    ['link', { rel: 'stylesheet', href: 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', integrity: 'xxx', crossorigin: 'anonymous' }]
  ],
  markdown: {
    config: md => {
      md.use(require('markdown-it-task-fontawesome'))
    }
  }
}

:fab-vuejs: x :fab-markdown: = VuePress