Please allow a non-diff usage

[AloisMahdal]

Currently we can show diff of two files, but it would be useful to also be able to show a single file.

I know it can be done with highlight.js but in my use case I'm showing diffs as well as whole files on the same page and it would be much easier to manage consistent styling and behavior if I could just use v-code-diff for both. (I think vue-json-compare can do it but it's for Vue 2).

Note that providing two identical texts leads to almost-perfect result for me, except that there are still two columns of line numbers, which would be confusing to user. So what I would like to see is basically the same but with only single column of line numbers.

How would I expect v-code-diff API to change? I'm thinking of several ways

• make one text optional and switch to single-file mode when it's missing
• switch to single-file mode if both texts are identical (no change in API)
• add single-file as a separate display mode (along with side-by-side, etc.)

[Shimada666]

Thanks for your suggestion! I need to consider about this.

[AloisMahdal]

I learned a bit more about Vue and came up with this workaround:

<template>
    <CodeDiff
      hide-header
      language="json"
      :old-string="props.text"
      :new-string="props.text"
    />
</template>

<script setup>
import { CodeDiff } from 'v-code-diff'

const props = defineProps({
  text: {
    type: String,
    required: true,
  },
})
</script>

<style scoped>
.code-diff-view :deep(td:nth-child(1)) {
  display: none;
}
</style>

I saved this as RawJSON.vue and can use it to display nicely formatted JSON by using it as <RawJSON text='{"foo": 1}'/>

[Shimada666]

@AloisMahdal Thank you for your contribution! For now, I have implemented your solution and created the CodeReader component, which is compatible with Vue 2.7 and Vue 3. I will continue to improve it in the future.