【JavaScript教程】尝试解决vitepress等markdown文档写作 文档和预览要写2遍代码

在配置好vitepress后写demo文档 一般会遇到代码写一遍用于展示代码本身，再写一遍代码用于渲染展示代码的运行结果，那代码就写了2遍，比较繁琐，虽然可以copy文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15747.html

下面举个例子： 要在markdown文档写出图片上效果文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15747.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15747.html

那么在具体.md文件里要这么写文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15747.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15747.html

从上面可以看到同样的代码被写了2次，如果要修改代码就要修改2次，有时会修改一处而忘记修改另一个地方，导致错误不一致。我试图寻找插件来解决但并没有找到，下面是我的解决方法

• 1：把要写2遍的代码写到.vue文件里
• 2：在.md文件里引入2次这个.vue文件
  • 2-1：一次显示原始字符串代码，并使用highlight.js来高亮代码并渲染
  • 2-2：另一次直接按vue组件引入，注册并渲染显示

一：demo.vue文件

<template>
  <el-button @click="btn">点击alert</el-button>
</template>
<script setup>
function btn() {
  alert();
}
</script>
<style></style>

二：demo.md文件

在vitepress里，以?raw方式可以获取.vue文件的原始字符串 show-code是全局组件文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15747.html

<Demo/>//vue组件渲染
<show-code :code="DemoRaw"/>//全局字符串组件渲染
<script setup>
    import Demo from "./demo.vue"
    import DemoRaw from "./demo.vue?raw"
</script>

show-code组件代码

最外层的class类名 是为了和vitepress的原始样式保持一致文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15747.html

<template>
  <div class="language-vue vp-adaptive-theme">
    <button
      title="Copy Code"
      class="copy"
      :class="{ copied: isCode }"
      @click="copyCode"
    ></button>
    <pre
      class="shiki shiki-themes github-light github-dark"
    ><code class="javascript" v-html="codeString"></code></pre>
  </div>
</template>
<script setup>
import hljs from "highlight.js/lib/core";
import "highlight.js/lib/common";
import "highlight.js/styles/atom-one-dark.css";
import javascript from "highlight.js/lib/languages/javascript";
const props = defineProps({
  code: {
    default: "",
  },
});
let isCode = ref(false);
hljs.registerLanguage("javascript", javascript);

const codeString = computed(() => {
  const highlightedCode = hljs.highlight(props.code, {
    language: "javascript",
  });
  return highlightedCode.value;
});

function copyCode() {
  const textArea = document.createElement("textarea");
  textArea.value = props.code;
  // 避免在页面中看到文本域：
  textArea.style.position = "fixed";
  textArea.style.left = "-9999px";
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    const successful = document.execCommand("copy");
    console.log("Copying text command was " + successful);
  } catch (err) {
    console.error("Oops, unable to copy", err);
  }
  document.body.removeChild(textArea);
//   ElMessage.success("复制成功");
  isCode.value = true;
  setTimeout(() => {
    isCode.value = false;
  }, 1000);
}
</script>

至此可以解决的问题有 1：代码可以只写一遍，不用频繁手动复制 2：避免修改了一处代码而忘记修改另一处代码的问题