Descarga code input - Descargar el código fuente de code input

code input

Otros recursos

2.4.0

Descargar

entrada de código

Texturas de sintaxis totalmente personalizables, editables, que se pueden colocar en cualquier forma HTML. [Ver la demostración]

Usar la entrada de código con muchos temas diferentes Esta demostración utiliza temas de prism.js y stoppect.js, dos programas de iluminación de sintaxis que funcionan bien y tienen compatibilidad incorporada con la entrada de código.

Una biblioteca JavaScript frontend, con:

¿Qué hace?

code-input le permite convertir cualquier tema y programa de iluminación de sintaxis de JavaScript ordinario en texturas con sintaxis personalizables con iluminado con una sintaxis utilizando un elemento personalizado HTML. Utiliza CSS de vainilla para superponer un textarea en un bloque pre code , luego maneja las hendiduras, desplazando y corrige cualquier error resultante con JavaScript. Para ver cómo funciona detrás de escena (no cómo usar esta biblioteca), consulte este artículo de CSS-Tricks que escribí.

¿Cuáles son las ventajas de usar la entrada de código y para qué se puede usar?

A diferencia de otros proyectos de editor de código front-end, la simplicidad de cómo funciona code-input significa que es altamente personalizable . Como no es un editor con todas las funciones, puede elegir qué características desea que incluya, y usar sus algoritmos y temas favoritos de iluminación de sintaxis .

El elemento <code-input> funciona como un <textarea> y, por lo tanto , funciona en formularios HTML5 y admite el uso de los atributos name , value y placeholder , eventos como onchange , formulario de reinicio, por nombrar algunos ... (demostración)

code-input también ha acumulado muchas características en complementos opcionales de contribuciones de código abierto, lo que le permite elegir cualquier característica que desee. Si una función que desea no está presente, ¡abra un problema / contribuya!

Comenzando con `code-input` (en 4 pasos simples)

`code-input` también admite TypeScript (haga clic))

Puede seguir las instrucciones a continuación, o usar el código de inicio disponible aquí para resalt.js y aquí para prism.js.

code-input está diseñado para ser fácil de usar y personalizable . Aquí le mostramos cómo usarlo para crear texturas con sintaxis:

1. Importación de `code-input`

Primero, importe los archivos de temas JS y CSS de Syntax-Highlighter favoritos para que se vuelvan editables.
Luego, importe los archivos CSS y JS de code-input desde una versión descargada o un CDN. Los archivos no minificados son útiles para usar durante el desarrollo.

Descargado localmente (haga clic)

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

Desde JSDELIVR CDN (haga clic)

 <!--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. Creación de una plantilla

El siguiente paso es configurar una template para vincular code-input a su más alta sintaxis. Si está utilizando prism.js o stoppect.js, puede usar la plantilla incorporada, o puede crear su propia de otra manera. En estos ejemplos, estoy registrando la plantilla como "syntax-highlighted" , pero puede usar cualquier nombre de plantilla siempre que sea consistente.

Destacado.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) */ ) ) ;

Costumbre:

 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. Agregar complementos

Los complementos le permiten agregar características adicionales a una plantilla, como la sangría automática o soporte para la autodetección de lenguaje de resaltación.js. Para usarlos, solo:

Importe los archivos JS de los complementos después de haber importado code-input y antes de registrar la plantilla.
Coloque las instancias de los complementos en la matriz del argumento de los complementos al registrarse, así:

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

️ Desafortunadamente, colocar múltiples complementos del mismo tipo en una plantilla actualmente puede causar errores y comportamientos indefinidos, incluso si dicha configuración tiene sentido lógico. Este es el problema #118 y se solucionará lo antes posible, si desea ayudar y tener el tiempo de lo que es bienvenido, pero también está en la parte superior de la lista de tareas del mantenedor.

Para ver una lista completa de complementos y sus funciones, consulte los complementos/readme.md.

4. Usando el componente

Ahora que ha registrado una plantilla, puede usar el elemento personalizado <code-input> en HTML. Si tiene más de una plantilla registrada, debe agregar el nombre de la plantilla como atributo template . Con el elemento, el uso del atributo language agregará una clase language-{value} al bloque pre code . Ahora puede usar atributos y eventos HTML, así como los estilos CSS, para hacer que su elemento sea tan simple o interactivo como desee, ¡como si fuera un elemento textarea !

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

o

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

️ En este momento, debe establecer la propiedad --padding en lugar de padding para el CSS de un elemento code-input . Todas las demás propiedades deberían funcionar como normales.

Que contribuye

Si tiene alguna característica, desea agregar a code-input como complementos o funcionalidad central, o ha encontrado algún error, ¡abra un problema o bifurcación y envíe una solicitud de extracción! Todas las contribuciones a este proyecto de código abierto serán muy apreciadas. Puede ver más información en nuestro archivo CONTRIBUTING.md .