@zeedhi/zd-highlight-vue

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: - typescript, ts - javascript, js - html - css - json - bash, shell Mais detalhes em Prism JS

---

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! 😉

---