跳至主要內容

Klipse 插件的使用

墨七大约 1 分钟约 384 字...

Klipse 插件的使用

相关信息

Klipse 是一个 JavaScript 插件,用于在技术博客中嵌入交互式代码片段,从技术层面上讲,Klipse 是一小段 JavaScript 代码,用于评估浏览器中的代码片段,并且可以在任何网页上插入。

Github 仓库地址: https://github.com/viebel/klipseopen in new window

该插件在 vuepress 中使用的方式如下:

第一步

src/.vuepress/config.ts 配置文件中新增如下配置,添加全局的 css

src/.vuepress/config.ts

import { defineUserConfig } from 'vuepress';

export default defineUserConfig({
  // ...
  head: [
    [
      'link',
      { rel: 'stylesheet', type: 'text/css', href: '//storage.googleapis.com/app.klipse.tech/css/codemirror.css' },
    ],
    ['link', { rel: 'stylesheet', type: 'text/css', href: '//storage.googleapis.com/app.klipse.tech/css/prolog.css' }],
  ],
  // ...
});

参考文档 https://theme-hope.vuejs.press/zh/guide/customize/external.htmlopen in new window

src/.vuepress/styles/index.scss 中添加如下 css 用来覆盖 vuepress 主题的默认样式

src/.vuepress/styles/index.scss

.klipse-demo pre {
  margin: 0;
  padding: 0;
}

第二步

将如下代码直接放入 markdown 页面中:

<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>

<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 = '//storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js?the_version=7.11.2';
    window.document.body.appendChild(jsElm);
  }
</script>

最终效果如下

    
      #include <iostream>
      using namespace std;
      int main() {
        cout << "Hello World!" << endl;
        return 0;
      }  
    
  
上次编辑于:
贡献者: mo7
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度