Componente Highlight para Zeedhi
Instalação | Uso Básico | Propriedades |
O component zd-highlight é usado para mostrar o código usando uma das linguagens suportadas pelo Prism Js
Instalação
Para instalar o pacote basta rodar o seguinte comando:
npm i @zeedhi/zd-highlight
Com isso, dois pacotes serão instalados: o @zeedhi/zd-highlight-common e o @zeedhi/zd-highlight-vue.
Após a instalação, é necessário que você importe o pacote @zeedhi/zd-highlight-vue dentro de seu arquivo de configuração zeedhi.ts
import ZdHighlight from '@zeedhi/zd-highlight-vue';
Vue.component('ZdHighlight', ZdHighlight);
Já o pacote @zeedhi/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
Nome | Tipo | Default | Descrição |
---|---|---|---|
code | string | '' | Define o código inicial |
readonly | boolean | false | Define se o código é somente leitura |
maxHeight | string | none | Define a altura máxima que o textarea vai ter |
cssClass/td> | string | Define uma class no component | |
cssStyle | string | object | Define um style in line no component | |
lineNumbers | boolean | false | Define se deve mostra o número das linhas |
loadExtraLanguages | string | Function | function | Define uma função para carregar novas linguagens |
autoStyleLineNumbers | boolean | true | |
enableFullscreen | boolean | false | Habilita a opção de tela cheia para o Highlight |
tabSize | number|string | 2 | Define o número de caracteres a serem inseridos ao pressionar a tecla tab. |
insertSpaces | boolean | true | Define se deve usar espaços para indentação |
ignoreTabKey | boolean | false | Se o editor deve ignorar os pressionamentos de tecla de tabulação para que os usuários do teclado possam passar pelo editor |
language | string | ts | Código de idioma a ser usado pelo highlight:
|
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
Se isso te ajudou, dê uma