Download code input - download de code input de código

code input

Outros recursos

2.4.0

Baixar

entrada de código

TEXTAREAS TOTLO LELHADO EDIVILÍVEL e Highlight Editable que podem ser colocadas em qualquer formulário HTML. [Veja a demonstração]

Usando a entrada de código com muitos temas diferentes Esta demonstração usa temas do Prism.js e Highlight.js, dois programas de iluminação de sintaxe que funcionam bem e têm compatibilidade integrada com a entrada de código.

Uma biblioteca JavaScript de front -end, com:

O que isso faz?

code-input permite transformar qualquer tema comum de iluminação de sintaxe JavaScript e programar em textaras de sintaxe de sintaxe personalizáveis usando um elemento personalizado HTML. Ele usa CSS de baunilha para sobrepor uma textarea em um bloco pre code e, em seguida, lida com os recortes, rolando e corrige todos os bugs resultantes com JavaScript. Para ver como funciona nos bastidores (não como usar esta biblioteca), consulte este artigo do CSS-Tricks que escrevi.

Quais são as vantagens do uso da entrada de código e para que ela pode ser usada?

Ao contrário de outros projetos de código-end-editor front-end, a simplicidade de como funciona code-input significa que é altamente personalizável . Como não é um editor completo, você pode escolher os recursos que deseja incluir e usar seus algoritmos e temas favoritos de highlighting .

O elemento <code-input> funciona como um <textarea> e, portanto, funciona em formulários HTML5 e suporta o uso do name , value e atributos placeholder , eventos como onchange , Redefinições de formulário, para citar alguns ... (demonstração)

code-input também acumulou muitos recursos em plugins opcionais de contribuições de código aberto, permitindo que você escolha os recursos desejados. Se um recurso que você deseja não estiver presente, abra um problema / contribua com ele!

Introdução com `code-input` (em 4 etapas simples)

`code-input` também suporta o TypeScript (clique)

Você pode seguir as instruções abaixo ou usar o código de partida disponível aqui para destaque.js e aqui para prism.js.

code-input foi projetada para ser fácil de usar e personalizável . Veja como usá-lo para criar textaras iluminadas por sintaxe:

1. `code-input`

Primeiro, importe seus arquivos de tema JS e CSS de Syntax-Highlighter favoritos para tornar editáveis.
Em seguida, importe os arquivos CSS e JS da code-input de uma versão baixada ou de um CDN. Os arquivos não minificados são úteis para usar durante o desenvolvimento.

Baixado localmente (clique)

 <!--In the <head>-->
< script src =" path/to/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" path/to/code-input.min.css " >

De JSDelivr CDN (clique)

 <!--In the <head>-->
< script src =" https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.css " >

2. Criando um modelo

A próxima etapa é configurar um template para vincular code-input ao seu marcador de sintaxe. Se você estiver usando o prism.js ou highlight.js, poderá usar o modelo interno ou pode criar o seu próprio de outra forma. Nesses exemplos, estou registrando o modelo como "syntax-highlighted" , mas você pode usar qualquer nome de modelo, desde que seja consistente.

Destaque.js:

 codeInput . registerTemplate ( "syntax-highlighted" , codeInput . templates . hljs ( hljs , [ ] /* Array of plugins (see below) */ ) ) ;

Prism.js:

 codeInput . registerTemplate ( "syntax-highlighted" , codeInput . templates . prism ( Prism , [ ] /* Array of plugins (see below) */ ) ) ;

Personalizado:

 codeInput . registerTemplate ( "syntax-highlighted" , new codeInput . Template (
  function ( result_element ) { /* Highlight function - with `pre code` code element */
    /* Highlight code in result_element - code is already escaped so it doesn't become HTML */
  } ,

  true , /* Optional - Is the `pre` element styled as well as the `code` element?
         * Changing this to false uses the code element as the scrollable one rather
         * than the pre element */
        
  true , /* Optional - This is used for editing code - setting this to true sets the `code`
         * element's class to `language-<the code-input's lang attribute>` */

  false /* Optional - Setting this to true passes the `<code-input>` element as a second
         * argument to the highlight function to be used for getting data- attribute values
         * and using the DOM for the code-input */ ,

  [ ] // Array of plugins (see below)
) ) ;

3. Adicionando plugins

Os plug -ins permitem adicionar recursos extras a um modelo, como recuo automático ou suporte para o Highlight.js's Language Autotetection. Para usá -los, apenas:

Importe os arquivos JS dos plugins depois de importar code-input e antes de registrar o modelo.
Coloque instâncias dos plugins na matriz de argumentos de plugins ao se registrar, como este:

 < script src =" code-input.js " > </ script >
<!--...-->
< script src =" plugins/autodetect.js " > </ script >
< script src =" plugins/indent.js " > </ script >
<!--...-->
< script >
  codeInput . registerTemplate ( "syntax-highlighted" , 
    codeInput . templates . hljs (
      hljs , 
      [
        new codeInput . plugins . Autodetect ( ) , 
        new codeInput . plugins . Indent ( true , 2 ) // 2 spaces indentation
      ]
    )
  ) ;
</ script >

️ Infelizmente, a colocação de vários plugins do mesmo tipo em um modelo pode atualmente causar erros e comportamento indefinido, mesmo que essa configuração faça sentido lógico. Esta é a edição nº 118 e será corrigida o mais rápido possível - se você quiser ajudar e ter o tempo de boas -vindas, mas também está no topo da lista de tarefas do mantenedor.

Para ver uma lista completa de plugins e suas funções, consulte os plugins/readme.md.

4. Usando o componente

Agora que você registrou um modelo, você pode usar o elemento <code-input> personalizado no HTML. Se você tiver mais de um modelo registrado, precisará adicionar o nome do modelo como o atributo template . Com o elemento, o uso do atributo language adicionará uma classe language-{value} ao bloco pre code . Agora você pode usar atributos e eventos HTML, bem como estilos de CSS, para tornar seu elemento tão simples ou interativo quanto quiser, como se fosse um elemento textarea !

 < code-input language =" HTML " > </ code-input >

ou

 < code-input language =" HTML " placeholder =" Type code here " template =" syntax-highlighted " onchange =" console.log('Your code is', this.value) " > &lt; href='https://github.com/WebCoder49/code-input' > code-input&lt;/a > </ code-input >

️ No momento, você precisa definir a propriedade --padding em vez de padding o CSS de um elemento code-input . Todas as outras propriedades devem funcionar normalmente.

Contribuindo

Se você tiver algum recurso que deseja adicionar à code-input como plugins ou funcionalidade do núcleo, ou encontrou algum bug, abra um problema ou bifurque e envie uma solicitação de tração! Todas as contribuições para este projeto de código aberto serão muito apreciadas. Você pode ver mais informações em nosso arquivo CONTRIBUTING.md .