From the docs, it's clear that VuePress is using markdown-it for rendering Markdown, which it has extended with these beautiful custom containers.
I want to "extract" the Markdown renderer from VuePress (custom containers and all!) so that our in-browser Markdown editor shows a VuePress-esque version of the rendered Markdown (minus the sidebar, searchbar, etc).
As it's open source it's certainly possible - but poking around the VuePress code base hasn't revealed her secrets to me and unfortunately there is no "VuePress plugin" listed here.
In order to encourage people to contribute to our docs, also built using VuePress, I'm building a simple static server that fetches the latest Markdown files from our master docs branch and shows them side by side in a text box that contains all the Markdown on the left and the rendered version on the right.
From the docs website, users can "Edit this page!" which takes them to the static server where they see a preview and have a Markdown editor, and can hit a button to "Save Changes". All pending changes are bundled up into a pull request by a file watcher, which triggers or updates an existing PR against the master docs branch using our Gitbot (which also has the advantage of going through review and being linted while avoiding exposing internal config stuff to non-technical docs contributors).
VuePress currently uses the following markdown-it plugins:
markdown-it-anchormarkdown-it-container (this is the one that seems to most interest you)markdown-it-emojimarkdown-it-table-of-contentsIts style files (apparently in Stylus format) are probably worth looking at, too.