Téléchargement code input - Téléchargement code input du code

code input

Autres ressources

2.4.0

Télécharger

entrave de code

Textaire de syntaxe entièrement personnalisable et modifiable qui peut être placé sous n'importe quelle forme HTML. [Afficher la démo]

Utilisation de codes-entrée avec de nombreux thèmes différents Cette démonstration utilise des thèmes de Prism.js et Highlight.js, deux programmes de syntaxe-highLighting qui fonctionnent bien avec et ont une compatibilité intégrée avec le code-entrée.

Une bibliothèque JavaScript frontal, avec:

Que fait-il?

code-input vous permet de transformer n'importe quel thème et programme de syntaxe JavaScript ordinaire en textareas à haute syntaxe personnalisable à l'aide d'un élément personnalisé HTML. Il utilise Vanilla CSS pour superposer une textarea sur un bloc pre code , puis gère les indentations, le défilement et corrige tous les bogues résultants avec JavaScript. Pour voir comment cela fonctionne dans les coulisses (pas comment utiliser cette bibliothèque), veuillez consulter cet article CSS-Tricks que j'ai écrit.

Quels sont les avantages de l'utilisation de codes, et à quoi peut-il être utilisé?

Contrairement à d'autres projets de code-éditeur frontal, la simplicité du fonctionnement code-input signifie qu'elle est hautement personnalisable . Comme il ne s'agit pas d'un éditeur complet, vous pouvez choisir les fonctionnalités que vous souhaitez qu'il inclue et utiliser vos algorithmes et thèmes préférés de syntaxe .

L'élément <code-input> fonctionne comme un <textarea> et fonctionne donc sous forme HTML5 et prend en charge en utilisant le name , value et les attributs placeholder , des événements comme onchange , le formulaire réinitialise, pour n'en nommer que quelques ... (démo)

code-input a également accumulé de nombreuses fonctionnalités dans les plugins en option à partir des contributions open source, vous permettant de choisir toutes les fonctionnalités que vous souhaitez. Si une fonctionnalité que vous souhaitez n'est pas présente, veuillez ouvrir un problème / contribuer!

Début avec `code-input` (en 4 étapes simples)

`code-input` prend également en charge TypeScript (cliquez)

Vous pouvez suivre les instructions ci-dessous ou utiliser le code de démarrage disponible ici pour highlight.js et ici pour prisme.js.

code-input est conçu pour être à la fois facile à utiliser et personnalisable . Voici comment l'utiliser pour créer des textares à haute syntaxe:

1. Importer `code-input`

Tout d'abord, importez vos fichiers de thème JS et CSS de syntaxe préférés pour devenir modifiables.
Ensuite, importez les fichiers CSS et JS de code-input de code à partir d'une version téléchargée ou d'un CDN. Les fichiers non minifiés sont utiles pour l'utilisation pendant le développement.

Téléchargé localement (cliquez)

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

À partir de jsdelivr cdn (click)

 <!--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. Création d'un modèle

L'étape suivante consiste à configurer un template pour lier code-input à votre syntaxe-highlighter. Si vous utilisez Prism.js ou Highlight.js, vous pouvez utiliser le modèle intégré, ou vous pouvez créer le vôtre autrement. Dans ces exemples, j'enregistre le modèle comme "syntax-highlighted" , mais vous pouvez utiliser n'importe quel nom de modèle tant que vous êtes cohérent.

Highlight.js:

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

Prisme.js:

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

Coutume:

 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. Ajout de plugins

Les plugins vous permettent d'ajouter des fonctionnalités supplémentaires à un modèle, comme une indentation automatique ou une prise en charge de l'autodétection du langage de Highlight.js. Pour les utiliser, juste:

Importez les fichiers JS des plugins après avoir importé code-input et avant d'enregistrer le modèle.
Placez les instances des plugins dans l'argument du tableau des plugins lors de l'inscription, comme ceci:

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

️ Malheureusement, placer plusieurs plugins du même type dans un modèle peut actuellement provoquer des erreurs et un comportement non défini, même si une telle configuration est logique. Ceci est le problème n ° 118 et sera corrigé dès que possible - si vous souhaitez aider et avoir le temps que vous êtes le bienvenu, mais c'est aussi en haut de la liste de tâches du maintien.

Pour voir une liste complète des plugins et de leurs fonctions, veuillez consulter les plugins / readme.md.

4. Utilisation du composant

Maintenant que vous avez enregistré un modèle, vous pouvez utiliser l'élément <code-input> personnalisé dans HTML. Si vous avez enregistré plus d'un modèle, vous devez ajouter le nom du modèle comme attribut template . Avec l'élément, l'utilisation de l'attribut language ajoutera une classe language-{value} au bloc pre code . Vous pouvez désormais utiliser des attributs et des événements HTML, ainsi que des styles CSS, pour rendre votre élément aussi simple ou interactif que vous le souhaitez, comme s'il s'agissait d'un élément 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 >

️ Pour le moment, vous devez définir la propriété --padding plutôt que padding pour le CSS d'un élément code-input . Toutes les autres propriétés devraient fonctionner comme d'habitude.

Contributif

Si vous avez des fonctionnalités, vous souhaitez ajouter à code-input en tant que plugins ou fonctionnalité de base, ou si vous avez trouvé des bogues, veuillez ouvrir un problème ou une fourche et soumettre une demande de traction! Toutes les contributions à ce projet open source seront grandement appréciées. Vous pouvez voir plus d'informations dans notre fichier CONTRIBUTING.md .