zd-highlight
v1.1.0
Published
ZdHighlight
Downloads
12
Readme
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! 😉