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 &lt;iostream&gt;
      using namespace std;
      int main() {
        cout &lt;&lt; "Hello World!" &lt;&lt; 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;
      }
    
  

参考资料

Markdown 到 Vue SFC

上述 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 的特性，第三方插件不会污染项目全局，而且只有打开该页面时才会去加载第三方插件。