Les plugins

Bon alors la, j'en ai deja un peu plus chier! Entre Yarn, NPM mais SURTOUT des syntax qui sont sensiblement jamais les mêmes d'un plugin a l'autre pour modifier le fichier config.js autant dire que ce fut pénible à explorer.

Apprentissage par l'exemple, je vais décrire les plugins que j'ai installé et leur configuration

La documentation https://vuepress.vuejs.org/plugin/

Sidebar automatique

https://www.npmjs.com/package/vuepress-bar

la doc est clair, je ne m'etend pas

PlantUML

https://www.npmjs.com/package/markdown-it-plantuml

WARNING

La conf ici utilise le serveur du site de plantuml. C'est pratique pour les petits schéma ou pour le test, mais si vous avez beaucoup de schéma ou des schéma tres gros, cela va bloquer. J'éttofferais plus tard.

WARNING

J'oubliais, si les images n'appairaissent pas, coupez votre bloqueur de pub. Je vous raconte pas le temps que j'ai mis a comprendre que c'était ublock qui faisait merder le bousin!

Dans le fichier config.js

a l'intérieur de

module.exports = {
},

Pour le coup, moi, je l'ai calé entre head :{}, et themeConfig :{},. Voilà c'est une info inutile mais bon...

module.exports = {
  markdown: {
    extendMarkdown: md => {
      md.use(require('markdown-it-plantuml'), options)
    }
  },
},

Notez la présence du parametre "options" au dessus. Cela fait refecence a la constante suivant qui est a positionner tout en haut de config.js

Il y a plusieurs options possible décrite dans la documentation. Celle que j'ai spécifié me permet d'avoir la même syntax pour vuepress que pour mes previews en markdown dans vsCode. Oui, j'utilise vsCode.

const options = {
  openMarker: '```plantuml',
  closeMarker: '```'
}

Pour l'intégrer dans une page:

@startuml
Bob -> Alice : hello
@enduml

Back-to-Top

plugin tout simple qui ajoute un bouton en bas de page pour revenir tout en haut

yarn add -D @vuepress/plugin-back-to-top

Dans le fichier config.js

module.exports = {
  plugins: ['@vuepress/back-to-top']
}

Medium Zoom

@vuepress/plugin-medium-zoom

yarn add -D @vuepress/plugin-medium-zoom

Dans le fichier config.js

module.exports = {
  plugins: ['@vuepress/medium-zoom']
}