feat: add CodeReader component

src/CodeReader.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import CodeDiff from './CodeDiff.vue'
+
+withDefaults(defineProps<{
+  language?: string
+  text: string
+}>(), {
+  language: 'plaintext',
+})
+</script>
+
+<template>
+  <CodeDiff
+    hide-header
+    :language="language"
+    :old-string="text"
+    :new-string="text"
+  />
+</template>
+
+<style scoped>
+.code-diff-view :deep(td:nth-child(1)) {
+  display: none;
+}
+</style>

src/global.ts

@@ -1,8 +1,10 @@
 import CodeDiff from './CodeDiff.vue'
+import CodeReader from './CodeReader.vue'
 import hljs from './highlight'
 
 function install(app: any) {
   app.component('CodeDiff', CodeDiff)
+  app.component('CodeReader', CodeReader)
 }
 
 export default {

src/index.ts

@@ -1,12 +1,15 @@
 import CodeDiff from './CodeDiff.vue'
+import CodeReader from './CodeReader.vue'
 import hljs from './highlight'
 
 function install(app: any) {
   app.component('CodeDiff', CodeDiff)
+  app.component('CodeReader', CodeReader)
 }
 
 export {
   CodeDiff,
+  CodeReader,
   hljs,
 }
 

vue2-playground/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { reactive, version } from 'vue-demi'
+import { CodeReader } from '../src/index'
 
 const form = reactive({
   oldString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "往者不可谏，来者犹可追。",\n    "from": "论语·微子篇"\n  },\n  "time": "2024-01-12 17:27:03"\n}',
@@ -25,6 +26,8 @@ const form = reactive({
       :ignore-matching-lines="form.ignoreMatchingLines"
       output-format="side-by-side"
     />
+    <hr>
+    <CodeReader :text="form.newString" :language="form.language" />
   </div>
 </template>
 

vue2.7-playground/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { version } from 'vue-demi'
 import { reactive } from 'vue'
+import { CodeReader } from '../src/index'
 
 const form = reactive({
   oldString: '{\n  "code": "200",\n  "msg": "请求成功",\n  "data": {\n    "hitokoto": "往者不可谏，来者犹可追。",\n    "from": "论语·微子篇"\n  },\n  "time": "2024-01-12 17:27:03"\n}',
@@ -26,6 +27,8 @@ const form = reactive({
       :ignore-matching-lines="form.ignoreMatchingLines"
       output-format="side-by-side"
     />
+    <hr>
+    <CodeReader :text="form.newString" :language="form.language" />
   </div>
 </template>
 

vue3-playground/App.vue

@@ -2,7 +2,7 @@
 import { version } from 'vue-demi'
 import { reactive } from 'vue'
 import c from 'highlight.js/lib/languages/c'
-import { CodeDiff, hljs } from '../src/index'
+import { CodeDiff, CodeReader, hljs } from '../src/index'
 
 hljs.registerLanguage('c', c)
 // import { oldLongText } from '../demo/text/old-long-text'
@@ -42,6 +42,8 @@ const form = reactive({
     :diff-style="form.diffStyle"
     :context="form.context"
   />
+  <hr>
+  <CodeReader :text="form.newString" :language="form.language" />
 </template>
 
 <style>