はじめに
整形した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色付け係というわけだ。