Nuxt3でXMLをフォーマットしてシンタックスハイライト表示する

概要

以下の画像にあるように、Nuxt3を使ってXML形式のテキストデータを表示する機会がありましたので、その備忘録です。

インストール

以下の2つのライブラリを使用しました。

npm i xml-formatter
npm i highlight.js

使い方

Nuxt3のコンポーネントとして、以下のようなファイルを作成しました。xml-formatterでXML形式の文字列をフォーマットし、さらにhighlight.jsを使ってシンタックスハイライトを行っています。

<script setup lang="ts">
import hljs from "highlight.js";
import "highlight.js/styles/xcode.css";
import formatter from "xml-formatter";

interface PropType {
  xml: string;
}

const props = withDefaults(defineProps<PropType>(), {
  xml: "",
});

const formattedXML = ref<string>("");

onMounted(() => {
  // `highlightAuto` 関数が非同期でない場合は、
  // `formattedXML` を直接アップデートできます。
  // そうでない場合は、適切な非同期処理を行ってください。
  formattedXML.value = hljs.highlightAuto(formatXML(props.xml)).value;
});

const formatXML = (xmlstring: string) => {
  return formatter(xmlstring, {
    indentation: "  ",
    filter: (node) => node.type !== "Comment",
  });
};
</script>
<template>
  <pre class="pa-4" v-html="formattedXML"></pre>
</template>
<style>
pre {
  /* 以下のスタイルは適切で、pre要素内のテキストの折り返しを制御しています。 */
  white-space: pre-wrap; /* CSS 3 */
  white-space: -moz-pre-wrap; /* Mozilla, 1999年から2002年までに対応 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>

まとめ

TEI/XMLデータの可視化などにおいて、参考になりましたら幸いです。