vuepress组件

一

src/.vuepress/components/MyComponent.vue

<template>
<link href='/css/codemirror.css' rel='stylesheet' />
<link href='/css/prolog.css' rel='stylesheet' />

<div class="klipse-demo">
<pre>
<code class="language-klipse-cpp">

</code>
</pre>
</div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
window.klipse_settings = {
codemirror_options_in: {
lineWrapping: true,
autoCloseBrackets: true,
},
codemirror_options_out: {
lineWrapping: true,
},
beautify_strings: true,
selector_eval_cpp: '.language-klipse-cpp',
};

init_klipse_lib();
});

// 配置文件设置完毕之后,动态引入 Klipse 插件使其生效
function init_klipse_lib() {
var jsElm = document.createElement('script');
jsElm.src = '/js/klipse_plugin.min.js?the_version=7.11.2';
window.document.body.appendChild(jsElm);
}
</script>

<style>
.klipse-demo pre {
margin: 0;
padding: 0;
}
</style>

二

src/.vuepress/client.ts

import { defineClientConfig } from "vuepress/client";
import MyComponent from "./components/MyComponent.vue";

export default defineClientConfig({
  enhance: ({ app, router, siteData }) => {
    app.component("MyComponent", MyComponent);
  },
});

三