vue.js - How to write a Markdown extension in VuePress - Stack Overflow

admin管理员组

文章数量:1393402

I want to add an extension to VuePress to be able to make left indents for text.

For this, I created a project pnpm create vuepress-theme-hope my-docs

Added a plugin @vuepress/plugin-register-components": "2.0.0-rc.82

Registered the plugin in the project config.ts

plugins: [
  registerComponentsPlugin({
    componentsDir: path.resolve(__dirname, "./components"),
  }),
],

Created a component: Components\sh.vue …

<template>
  <div class="sh-class">
    <slot></slot> <!-- slot outlet -->
  </div>
</template>

<script>
  export default {
    name: 'sh'
  }
</script>

<style scoped>
  .sh-class {
    display: block;
    margin-inline-start: 40px;
  }
</style>

And I use the component in Markdown text. But as a result, the system does not consider the text inside the tag as Markdown. The text inside the tag comes as Plain Text.

<sh>Maring `TObject` Test1</sh>
<br>
Test2
<sh>
An `object` that defines name of components and their corresponding file path.

An object that defines name of components and their corresponding file `path`.
</sh>
<br>

Tell me, is it possible to write a “full-fledged” extension for Markdown format in VuePress?

本文标签： vuejsHow to write a Markdown extension in VuePressStack Overflow