Vue 3.0でhighlight.jsを使って、整形したJSONに色を付けて表示

14755 ワード
JSON TypeScript highlight.js vue.js3 Vue3 JSON テキストリンク

はじめに

整形した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】WebサイトでJSONファイルを整形して表示したいにある通り、<pre></pre>に整形したJSON文字列を突っ込んでいい感じに表示します。
でもそれだけだと色がつかないので、highlightAutoを使ってタグを付けます。
{{ highlightJSON }}だとinnerTextになってしまうので、v-htmlを使ってinnerHTMLにしてやります。
import 'highlight.js/styles/xcode.css';の部分でデザインを変えられます。コードのハイライト表示用 JS ライブラリ highlight.js の使い方を参考にしてください

これでnpm run serveで以下のように表示されます。

おわりに

これで名実ともにJSON色付け係というわけだ。

参考