소개

성형된 JSON을 표시하고 더 많은 색상을 원하면 highlight.js이 있습니다.
또한 Vue에서 highlight.js를 사용하려고하면 Using with Vue.js에있는 방법과 vue-highlightjs이 있습니다.
하지만 Vue 3.0에서 사용하려고하면 어느 쪽이든 대응할 수 없습니다.
그럼 어떻게 할까요?

준비

vue-cli로 손쉽게 Vue 3+ TypeScript 프로젝트를 만들자!을 참고로 Vue 3.0 TypeScript 환경을 구축합니다.
그리고 highlight.js 와 TypeScript로 코드를 작성하기 때문에 @types/highlight.js를 넣습니다.
npm을 사용했습니다.

npm install highlight.js @types/highlight.js

디렉토리 구성

src 내에서만 올립니다.

src/
├── App.vue
├── main.ts
├── shims-vue.d.ts
├── assets
└── components
        └── highlight-json.vue

코드

App.vue

지난번처럼 , App.vue 의 state.content 에 json 데이터를 그대로 갖게 하고 있습니다.

<template>
  <div id="app">
    <hljson :content="state.content"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import hljson from './components/highlight-json.vue';

type State = {
  content: object;
};

export default defineComponent({
  name: 'App',
  components: {
    hljson
  },
  setup() {
    // property
    const state = reactive<State>({
      content: {
        "hoge": "fuga",
        "foo": "bar",
        "nums": [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
        "hashLists": [
          {
            "id": 0,
            "value": "a"
          },
          {
            "id": 1,
            "value": "b"
          },
          {
            "id": 3,
            "value": "c"
          }
        ],
        "bool-1": true,
        "bool-0": false
      }
    });
    return {
      state,
    };
  }
});
</script>

highlight-json.vue

<template>
    <div class="highlight-json">
        <pre v-html="highlightJSON"></pre>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, watch, computed } from 'vue';
import hljs from 'highlight.js';
import 'highlight.js/styles/xcode.css'; // ここでデザインを変更

type Props = {
    content: object;
};
type State = {
    content: object;
};

export default defineComponent({
    name: "highlight-json",
    props: {
        content: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    setup(props: Props) {
        // property
        const state = reactive<State>({
            content: props.content
        });
        // watcher
        watch(props, (newVal) =>{
            state.content = newVal.content;
        });
        // computed
        const highlightJSON = computed(()=>
            hljs.highlightAuto(JSON.stringify(state.content, null , "\t"), ['JSON']).value
        );
        return {
            state,
            highlightJSON
        }
    }
});
</script>

Node.js에서 파일을 저장하는 방법 을 참고로, JSON.stringify(state.content, null , "\t") 로 JSON 을 성형, 【HTML+JavaSciprt】웹사이트에서 JSON 파일을 성형하여 표시하고 싶다 에 있는 대로, <pre></pre> 에 성형한 JSON 캐릭터 라인을 돌진해 좋은 느낌으로 표시합니다.
하지만 그것만으로는 색이 붙지 않기 때문에, highlightAuto (을)를 사용해 태그를 붙입니다.{{ highlightJSON }} 그렇다면 innerText가되어 버리므로 v-html를 사용하여 innerHTML로 만들 수 있습니다.import 'highlight.js/styles/xcode.css'; 부분에서 디자인을 변경할 수 있습니다. 코드 강조 표시를위한 JS 라이브러리 highlight.js 사용 참조

이제 npm run serve에서 다음과 같이 표시됩니다.

결론

이것으로 명실 모두 JSON 색채계라는 셈이다.

참고

highlight.js

highlight.js 문서 번역

【TypeScript】마크다운 문자열을 HTML로 퍼스(GitHub Flavored Markdown)