webdevnerdstuff / vue-code-block Goto Github PK

Bug description

IN your package json you have fired

"engines": { "node": "19.0.1" },

I use --ignore-engines and it works with node 18

Steps to reproduce

1. yarn install

Relevant log output

warning [email protected]: The engine "vscode" appears to be invalid.
error [email protected]: The engine "node" is incompatible with this module. Expected version "19.0.1". Got "18.6.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Hello,

I would to ask if numbered lined are planned or if I can add a PR with the feature.

Best regards

Bug description

Error when packaging

When I encapsulated this component for the second time, the IDE did not report any errors at all. It only reported errors during packaging.

Steps to reproduce

Error when packaging

Relevant log output

No response

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Vue Code Block Version

2.3.1

Vue Version

3.4.19

Bug description

So I'm using html <VCodeBlock :code="showContent" prismjs :lang="lang" theme="tomorrow" v-if="showContent != ''" :label="currPath" class="hellix" /> and it works perfectly. The syntax highlight renders correctly and it's great. However, when I try this:

        ```html
        <VCodeBlock
          :code="showContent"
          prismjs
          prismPlugin
          :lang="lang"
          theme="atom-one-light"
          v-if="showContent != ''"
          :label="currPath"
          class="hellix autolinker"
        />``` does not work. The syntax highlight disappears and the plugins do not get applied. I imported the following:
        
        ```js
           import 'prismjs/plugins/autolinker/prism-autolinker.js';
           import 'prismjs/plugins/autolinker/prism-autolinker.css';

            

### Steps to reproduce

1. Have a regular VCodeBlock and run your code. The syntax highlight should work correctly.
2. Add the prismPlugin prop to the component.
3. Syntax highlighting stopped working

### Relevant log output

```shell
No output

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Bug description

We have a GUI which is accessed by high-security customers, so the CSP policies and firewall requirements ideally need to be as self contained as possible.

Your implementation makes use of external CDNs like so:

const highlightCdn = ref(`https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@${highlightJsVersion}/build/styles`);
const prismCdn = ref(`https://cdn.jsdelivr.net/gh/PrismJS/prism@${prismVersion}/themes`);
const prismThemesCdn = ref(`https://cdn.jsdelivr.net/gh/PrismJS/prism-themes@${prismThemesVersion}/themes`);

We'd ideally like to use the NPM package manager and include these resources internally in our product. This will avoid needing to open up CSP and other firewalls to allow resources from https://cdn.jsdelivr.net from being permitted.

The risk here is that a malicious actor would inject code which runs scripts hosted on this CDN. Our CSP and firewall policy would not be able to stop this because we've made this permissive to get this product working.

If we were to use the highlightjs npm library without your vue implementation, this requirement isn't needed.

Steps to reproduce

Above above.

Relevant log output

AutomationGuideView-657bdc62.js:39 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self' https://apis.vipro.online https://apis.panessex.co.uk". Either the 'unsafe-inline' keyword, a hash ('sha256-SATV5v6C5TBYjsYpJqHI2uZmBVvLsFXgo77cQmxyvlQ='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ AutomationGuideView-657bdc62.js:39
AutomationGuideView-657bdc62.js:38 Refused to connect to 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/github-dark-dimmed.min.css' because it violates the following Content Security Policy directive: "default-src 'self' https://apis.vipro.online https://apis.panessex.co.uk". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

aa @ AutomationGuideView-657bdc62.js:38
AutomationGuideView-657bdc62.js:38 Refused to connect to 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/github-dark-dimmed.min.css' because it violates the document's Content Security Policy.

Additional context

With CSP blocking the external CDN resources, the plug-in actually looks like this:

Code of Conduct

• I agree to follow this project's Code of Conduct

Bug description

Importing of the additional languages is not working. Adding this issue to track it.

Steps to reproduce

1. Try adding another hljs language.

  import hljs from 'highlight.js/lib/core';
  import langTypescript from 'highlight.js/lib/languages/typescript';

  hljs.registerLanguage('typescript', langTypescript);

2. Notice there is an import error in the console.

Additional context

Complied code doesn't seem to be adding the importing of hightlight.js correctly.

Relevant code in CodeBlock.vue line 632.
https://github.com/webdevnerdstuff/vue3-code-block/blob/main/src/plugin/CodeBlock.vue#L632

Code of Conduct

• I agree to follow this project's Code of Conduct