Componente Highlight para Zeedhi

Instalação

Para instalar o pacote basta rodar o seguinte comando:
npm i zd-highlight
Com isso, dois pacotes serão instalados: o zd-highlight-common e o zd-highlight-vue.
Após a instalação, é necessário que você importe o pacote zd-highlight-vue dentro de seu arquivo de configuração zeedhi.ts

import Highlight from 'zd-highlight';

Vue.component('ZdHighlight', Highlight.ZdHighlight);

Já o pacote zd-highlight-common deve ser importado no arquivo controller do componente.

Uso Básico

Para usar, defina a propriedade component como 'ZdHighlight'.

{
  "name": "highlight-example",
  "component": "ZdHighlight"
}

Propriedades

Importar outras linguagens

Para importar alguma linguagem que não estão listadas, mas que o Prism JS da suporte basta seguir o examplo:

Intale o prismjs na sua aplicação

npm install prismjs

Utilize a propriedade 'loadExtraLanguages' para criar sua função que ira carregar a linguagem desejada

{
  "name": "componentName",
  "component": "ZdHighlight",
  "code": "",
  "language": "php",
  "loadExtraLanguages": "{{MyController.loadLanguage}}"
}

No seu controller utilize o seguinte código:

import Prism from 'prismjs';
import 'prismjs/components/prism-markup-templating.min';
import 'prismjs/components/prism-php.min';

export class MyController {
   public loadLanguage() {
    const { code, language } = Metadata.getInstance<Highlight>('codeEditorResultBasicUsage');
    return Prism.highlight(code, Prism.languages[language], language);
  }
}

Este componente foi desenvolvido com ❤️ por @John Everton. Se isso te ajudou, dê uma ⭐, isso vai me ajudar também! 😉