Change Style after packaging

[byAaronLuo]

I have discovered a new issue based on issue # 44. When I customize an hljs object and the highlighted code I need is HTTP RESPONSE, the highlighted code in the production and development environments is different, as shown in the following two images. The first image is the development environment, which only highlights the HTML; The second image shows the production environment, which only highlights the HTTP response header. Why are the highlighted codes in the production and development environments different? How should I solve the problem of production environments being out of sync with development environments

ps: Packaging tool: vue/cli 5.0.8 Dependency version: @highlightjs/vue-plugin:^2.1.2 main.js

import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljs from 'highlight.js/lib/core'
import hljsVuePlugin from '@highlightjs/vue-plugin'
import javascript from 'highlight.js/lib/languages/javascript'
hljs.registerLanguage('javascript', javascript)
app.use(hljsVuePlugin)

SFC:

<template>
  <div>
    <highlightjs autodetect :code="code"></highlightjs>
  </div>
</template>

[byAaronLuo]

Maybe I should ask if this is a bug? Is there something wrong with my packaging with vue-cli? So far I've only found this problem with the http response package

[joshgoebel]

Sounds like some sort of build problem... maybe? The highlighting shouldn't be different unless something at the JS level was different between your two environments. Maybe looking closely at your developer tools could help?

Look at the rendered code (in your browsers dev tools)... is the auto-detect somehow different? (css lang class)

[wb-wenbei]

import 'highlight.js/lib/common' is ignored in package. The second image hightlight the code as javascript. You should register the HTML language to highlight the code.

[byAaronLuo]

I found the problem, in the development tool the attributes of the code tag are not loaded with the corresponding CSS, e.g., the class of the highlighted http response in the development environment is hljs xml, in the production environment it is hljs javascript Thanks @joshgoebel for the suggestion! I found that in the development environment, the development environment should be able to directly use the language of /highlight.js/lib/languages/, but in the production environment, due to the use of webpack packaging, we have to customize the hljs object, the author provides the registration of the javascript highlighting, and here we need to artificially register the other highlighting language, for example, I want to highlight http response, then I need to register http, xml. this will solve the development environment and production environment highlighting style is not the same!

SFC

<script setup>
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljs from 'highlight.js/lib/core'
import hljsVuePlugin from '@highlightjs/vue-plugin'
import http from 'highlight.js/lib/languages/http'
import xml from 'highlight.js/lib/languages/xml'
hljs.registerLanguage('http', http)
hljs.registerLanguage('xml', xml)
const highlightjs = hljsVuePlugin.component
import { ref } from 'vue'
const httpResponse = ref('')
const 
</script>
<template>
  <div>
    <highlightjs autodetect :code="httpResponse" />
  </div>
</template>

[byAaronLuo]

import 'highlight.js/lib/common' is ignored in package. The second image hightlight the code as javascript. You should register the HTML language to highlight the code. Yeah. Thanks, I got solved this question that is code highlighted the HTTP RESPONSE But new issue is json 😂 i have already registered json in the development environment json is rendered to css, but in the production, the json is rendered to json😂 i dont know why🥺🥺🥺

[byAaronLuo]

For Json Issue

<script setup>
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljs from 'highlight.js/lib/core'
import hljsVuePlugin from '@highlightjs/vue-plugin'
import http from 'highlight.js/lib/languages/http'
import xml from 'highlight.js/lib/languages/xml'
import json from 'highlight.js/lib/languages/json'
hljs.registerLanguage('http', http)
hljs.registerLanguage('xml', xml)
hljs.registerLanguage('json', json)
const highlightjs = hljsVuePlugin.component
const obj = { a: '123', b: '456' }
const jsonOfObj =  JSON.stringify(obj)
const 
</script>
<template>
  <div>
    <highlightjs autodetect :code="jsonOfObj" />
  </div>
</template>

dev:

production

i need render http and json ✅ In a production environment, do I have to register every code that I want to highlight, and isn't that a pain what so trouble?

[Trinovantes]

@joshgoebel I think some bundlers ignore side effect imports and only look at package.json's sideEffects field. I think you need to add ./lib/common.js to highlight.js package.json.

[xiaomaiyun]

https://github.com/highlightjs/vue-plugin/issues/44#issuecomment-1594686145

[xiaomaiyun]

https://github.com/highlightjs/vue-plugin/issues/38