feat: format numbers in code highlighting with locale string (#69)

Added:
- Formatting numbers in topic last message highlight

Author: ChxGuillaume

src/renderer/src/components/tap-topics/CodeHighlight.vue

@@ -4,8 +4,8 @@ import { formatCode } from '@renderer/assets/js/format-code'
 import json from 'highlight.js/lib/languages/json'
 import yaml from 'highlight.js/lib/languages/yaml'
 import xml from 'highlight.js/lib/languages/xml'
+import { ref, watch, nextTick } from 'vue'
 import hljs from 'highlight.js/lib/core'
-import { ref, watch } from 'vue'
 
 hljs.registerLanguage('json', json)
 hljs.registerLanguage('xml', xml)
@@ -21,6 +21,7 @@ const props = defineProps<Props>()
 useHighlightTheme()
 
 const highlighted = ref('')
+const codeTextRef = ref<HTMLElement>()
 
 watch(
   [() => props.code, () => props.language],
@@ -32,13 +33,26 @@ watch(
     highlighted.value = hljs.highlight(code, {
       language: props.language
     }).value
+
+    nextTick(() => {
+      if (!codeTextRef.value) return
+
+      codeTextRef.value.querySelectorAll('span.hljs-number').forEach((el) => {
+        const text = el.textContent?.trim() ?? ''
+
+        if (/^-?\d+(\.\d+)?$/.test(text)) {
+          const num = parseFloat(text)
+          el.textContent = num.toLocaleString(undefined, { maximumFractionDigits: 12 })
+        }
+      })
+    })
   },
   { immediate: true }
 )
 </script>
 
 <template>
-  <span v-if="language !== 'raw'" class="code-text" v-html="highlighted" />
+  <span v-if="language !== 'raw'" ref="codeTextRef" class="code-text" v-html="highlighted" />
   <span v-else class="code-text" v-text="code" />
 </template>