6.Klipse 插件的使用
2024年11月27日大约 1 分钟约 353 字...
6.Klipse 插件的使用
相关信息
Klipse 是一个 JavaScript 插件,用于在技术博客中嵌入交互式代码片段。从技术层面上讲,Klipse 是一小段 JavaScript 代码,用于评估浏览器中的代码片段,并且可以在任何网页上插入。
Github 仓库地址: https://github.com/viebel/klipse
该插件在 VuePress
中使用的方式如下:
第一步: 编写 VuePress 插件
插件源码如下(可直接复制使用)
<script setup lang="ts">
import { onMounted, nextTick } from 'vue';
const css_list = [
{
id: 'klipse_codemirror_css',
href: '//storage.googleapis.com/app.klipse.tech/css/codemirror.css',
},
{
id: 'klipse_prolog_css',
href: '//storage.googleapis.com/app.klipse.tech/css/prolog.css',
},
];
// 插入 css 文件
function init_klipse_css(cssInfo) {
const linkElm = window.document.getElementById(cssInfo.id);
if (!linkElm) {
const linkElm = document.createElement('link');
linkElm.type = 'text/css';
linkElm.rel = 'stylesheet';
linkElm.href = cssInfo.href;
linkElm.id = cssInfo.id;
window.document.body.appendChild(linkElm);
}
}
// 插入 js 文件
function init_klipse_lib() {
var jsElm = document.createElement('script');
jsElm.src = '//storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js?the_version=7.11.2';
window.document.body.appendChild(jsElm);
}
function Start() {
const Win: any = window;
Win.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();
init_klipse_css(css_list[0]);
init_klipse_css(css_list[1]);
}
onMounted(() => {
nextTick(() => {
Start();
});
});
</script>
<template>
<ClientOnly>
<div class="none">Klipse 插件支持</div>
</ClientOnly>
</template>
<style lang="scss">
.klipse-demo pre {
margin: 0;
padding: 0;
}
</style>
Github 源码地址:
https://github.com/mo7cc/blog-source/blob/main/src/.vuepress/components/KlipseLoad.vue
第二步:在 Markdown 中使用编写好的插件
# Klipse 插件演示
## 最终效果如下
<div class="klipse-demo">
<pre>
<code class="language-klipse-cpp">
#include <iostream>
using namespace std;
int main() {
cout << "Hello World!" << endl;
return 0;
}
</code>
</pre>
</div>
<KlipseLoad />
<script setup>
import KlipseLoad from "@components/KlipseLoad.vue";
</script>
最终效果如下
#include <iostream>
using namespace std;
int main() {
cout << "Hello World!" << endl;
return 0;
}
参考资料
上述 Demo 中还使用到了路径映射:
import { defineUserConfig } from 'vuepress';
import { getDirname, path } from 'vuepress/utils';
const __dirname = getDirname(import.meta.url);
export default defineUserConfig({
// ...
alias: {
'@components': path.resolve(__dirname, 'components'),
},
// ...
});
基于
Vue SFC
的特性,第三方插件不会污染项目全局,而且只有打开该页面时才会去加载第三方插件。
你认为这篇文章怎么样?
- 0
- 0
- 0
- 0
- 0
- 0