Startseite>Ressourcen zum Erstellen von Websites>Andere Ressourcen
Herunterladen

Codeeingang

Vollständig anpassbare, bearbeitbare Syntax-Highlight-Textareas, die in jedem HTML-Formular platziert werden können. [Die Demo anzeigen]

Verwenden von Code-Eingang mit vielen verschiedenen Themen Diese Demonstration verwendet Themen von prism.js und highlight.js, zwei Syntax-Highlighting-Programme, die gut mit der Kompatibilität integriert sind und mit dem Code-Eingang integriert sind.

Eine Frontend JavaScript -Bibliothek mit:

Was macht es?

code-input können Sie alle gewöhnlichen JavaScript-Syntax-Highlighting-Themen und Programme mit einem HTML-benutzerdefinierten Element in anpassbare Syntax-Highlighted-Texten verwandeln . Es verwendet Vanille -CSS, um einen textarea in einem pre code -Block zu überlagern, dann Eindringlinge zu verarbeiten, zu scrollen und alle resultierenden Fehler mit JavaScript zu beheben. Um zu sehen, wie es hinter den Kulissen funktioniert (nicht wie diese Bibliothek zu verwenden), finden Sie in diesem CSS-Tricks-Artikel, den ich geschrieben habe.

Was sind die Vorteile der Verwendung von Codeeingängen und wofür können es verwendet werden?

Im Gegensatz zu anderen Front-End-Code-Editor-Projekten bedeutet die Einfachheit der Funktionsweise code-input sehr anpassbar . Da es sich nicht um einen Editor mit vollem Funktionsgespräch handelt, können Sie auswählen, welche Funktionen Sie einschließen möchten, und verwenden Ihre bevorzugten Syntax-Highlighting-Algorithmen und -Themen .

Das Element <code-input> funktioniert wie a <textarea> und funktioniert daher in HTML5-Formularen und unterstützt sie mit den name , value und placeholder , Ereignissen wie onchange , Form zurückzusetzen, um nur einige ... (Demo) zu benennen ... (Demo)

code-input hat auch viele Funktionen in optionalen Plugins aus Open-Source-Beiträgen gesammelt, sodass Sie alle gewünschten Funktionen auswählen können. Wenn eine gewünschte Funktion nicht vorhanden ist, öffnen Sie bitte ein Problem / beitragen Sie es bei!

Erste Schritte mit code-input (in 4 einfachen Schritten)

code-input unterstützt auch TypeScript (Klicken)

Sie können die folgenden Anweisungen befolgen oder den hier verfügbaren Startercode für Highlight.js und hier für Prism.js verwenden.

code-input ist sowohl einfach zu bedienen als auch anpassbar . Hier erfahren Sie, wie Sie es verwenden, um eine Syntax-Highlighted Textareas zu erstellen:

1. importieren code-input

  • Importieren Sie zunächst die JS- und CSS-Themendateien Ihres bevorzugten Syntax-Highlighter, um bearbeitbar zu werden.
  • Importieren Sie dann die CSS- und JS-Dateien von code-input aus einer heruntergeladenen Version oder einem CDN. Die nicht überminifizierten Dateien sind nützlich für die Verwendung während der Entwicklung.
Lokal heruntergeladen (klicken) 
 <!--In the <head>-->
< script src =" path/to/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" path/to/code-input.min.css " >
Von JSDelivr CDN (Klicken) 
 <!--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. Erstellen einer Vorlage

Der nächste Schritt besteht darin, eine template für den Verknüpfung code-input mit Ihrem Syntax-Highlighter einzurichten. Wenn Sie Prism.js oder highlight.js verwenden, können Sie die integrierte Vorlage verwenden oder sonst Ihre eigene erstellen. In diesen Beispielen registriere ich die Vorlage als "syntax-highlighted" , aber Sie können jeden Vorlagennamen verwenden, solange Sie konsistent sind.

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

  • Brauch: 

     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. Hinzufügen von Plugins

Mit Plugins können Sie einer Vorlage zusätzliche Funktionen hinzufügen, z. B. die automatische Einklebung oder die Unterstützung von Highlight.js Sprachautodetektion. Um sie zu benutzen, nur:

  • Importieren Sie die JS-Dateien der Plugins, nachdem Sie code-input importiert haben und vor dem Registrieren der Vorlage.
  • Platzieren Sie Instanzen der Plugins im Argument der Plugins bei der Registrierung wie folgt: 
 < 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 >

Euen Leider kann das Platzieren mehrerer Plugins desselben Typs in einer Vorlage derzeit Fehler und ein undefiniertes Verhalten verursachen, auch wenn eine solche Konfiguration logisch sinnvoll ist. Dies ist Ausgabe Nr. 118 und wird so schnell wie möglich behoben - wenn Sie helfen möchten und die Zeit haben, die Sie willkommen sind, aber auch ganz oben auf der To -Do -Liste des Betreuers.

Eine vollständige Liste von Plugins und deren Funktionen finden Sie unter Plugins/Readme.md.

4.. Verwenden der Komponente

Nachdem Sie eine Vorlage registriert haben, können Sie das benutzerdefinierte <code-input> -Element in HTML verwenden. Wenn Sie mehr als eine Vorlage registriert haben, müssen Sie den Vorlagennamen als template hinzufügen. Mit dem Element fügt die Verwendung des language dem pre code Block eine language-{value} -Klasse hinzu. Sie können jetzt HTML -Attribute und -ereignisse sowie CSS -Stile verwenden, um Ihr Element so einfach oder interaktiv zu gestalten, wie Sie möchten, als wäre es ein textarea ! 

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

oder 

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

Euen Im Moment müssen Sie die Immobilie --padding einstellen, anstatt das CSS eines code-input -Elements padding . Alle anderen Eigenschaften sollten als normal funktionieren.

Beitragen

Wenn Sie Funktionen haben, die Sie dem code-input als Plugins oder Kernfunktionen hinzufügen möchten oder Fehler gefunden haben, öffnen Sie bitte ein Problem oder geben Sie eine Gabel und senden Sie eine Pull-Anfrage! Alle Beiträge zu diesem Open-Source-Projekt werden sehr geschätzt. Weitere Informationen finden Sie in unserer Datei CONTRIBUTING.md .

... bisher bei Pull -Anfragen beigetragen haben.
(Quelle: Beiträge)
Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle