Overview

As shown in the following image, I had the opportunity to display XML text data using Nuxt3, so this is a memo.

Installation

I used the following two libraries.

npm i xml-formatter
npm i highlight.js

Usage

I created the following file as a Nuxt3 component. It formats XML strings with xml-formatter and then applies syntax highlighting with 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>

Summary

I hope this is helpful for visualizing TEI/XML data.