Un éditeur de code simple mort avec des numéros de mise en évidence et de ligne de syntaxe. 3Kb / z
L'éditeur fonctionne à la fois pour Vue 2.x et Vue 3.x et vous êtes actuellement sur la branche qui prend en charge Vue 2.x. Allez ici pour la version compatible Vue 3.x
prim-editor.netlify.com
Plusieurs éditeurs de code basés sur un navigateur tels que Ace, Codemirror, Monaco, etc. offrent la possibilité d'intégrer un éditeur de code complet dans votre page Web. Cependant, si vous avez juste besoin d'un éditeur simple avec une syntaxe qui met en évidence sans aucune des fonctionnalités supplémentaires, ils peuvent être exagérés car ils n'ont généralement pas une petite empreinte de taille de bundle. Cette bibliothèque vise à fournir un éditeur de code simple avec une syntaxe qui met en évidence la prise en charge sans aucune des fonctionnalités supplémentaires, parfaite pour des intégres et des formulaires simples où les utilisateurs peuvent soumettre du code.
npm install vue-prism-editorou
yarn add vue-prism-editorVous devez utiliser l'éditeur avec une bibliothèque tierce qui fournit une mise en évidence de la syntaxe. Par exemple, cela ressemblera à suivre avec PrismJs:
Enregistrez le composant localement et utilisez-le (recommandé)
< template >
< prism-editor class =" my-editor " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ template >
< script >
// import Prism Editor
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles somewhere
// import highlighting library (you can use any library you want just return html string)
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism-tomorrow.css' ; // import syntax highlighting styles
export default {
components : {
PrismEditor ,
} ,
data : ( ) => ( { code : 'console.log("Hello World")' } ) ,
methods : {
highlighter ( code ) {
return highlight ( code , languages . js ) ; // languages.<insert language> to return html with markup
} ,
} ,
} ;
</ script >
< style >
/* required class */
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example: */
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >Notez que selon votre surligneur de syntaxe, vous devrez peut-être inclure des CSS supplémentaires pour la mise en évidence de la syntaxe pour fonctionner.
Ou enregistrez le composant mondial
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles
Vue . component ( 'PrismEditor' , PrismEditor ) ;Utilisation du navigateur (pour Codepen, etc.):
< script src =" https://unpkg.com/[email protected].* " > </ script >
<!-- Prism Editor -->
< script src =" https://unpkg.com/vue-prism-editor " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css " />
<!-- custom highlighter: -->
< script src =" https://unpkg.com/prismjs/prism.js " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/prismjs/themes/prism-tomorrow.css " />
< style >
.height-200{
height: 200px
}
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example:*/
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >
< div id =" app " >
< prism-editor class =" my-editor height-200 " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ div >
< script >
new Vue ( {
el : "#app" ,
data : ( ) => ( {
code : "console.log('hello world')"
} ) ,
methods : {
highlighter ( code ) {
// js highlight example
return Prism . highlight ( code , Prism . languages . js , "js" ) ;
}
} ,
} )
</ script > | Nom | Taper | Défaut | Options | Description |
|---|---|---|---|---|
value du modèle V | string | "" | - | Valeur actuelle de l'éditeur, c'est-à-dire le code à afficher |
| souligner | string => string | - | - | Rappel qui recevra du texte à mettre en surbrillance. Vous devrez retourner une chaîne HTML avec une syntaxe qui met en évidence à l'aide d'une bibliothèque telle que PrismJS. |
| lire en lecture | Boolean | false | - | Lire en lecture |
| linnumbers | Boolean | false | - | S'il faut afficher les numéros de ligne. Par défaut false |
| autostylélinéninembers | Boolean | true | - | Faire correspondre les numéros de ligne du texte Couleur sur le thème. Par défaut true |
| Tabsice | number | 2 | - | Le nombre de caractères à insérer lors de la touche de l'adhésion. Par exemple, pour 4 Space Indentation, tabSize sera 4 et insertSpaces sera true . Par défaut: 2 |
| espace insert | boolean | true | - | S'il faut utiliser des espaces pour l'indentation. Par défaut: true . Si vous le définissez sur false , vous pouvez également définir tabSize sur 1 |
| Ignoretabkey | boolean | false | - | Si l'éditeur doit ignorer les appuyés sur la touche de l'abat de l'adaptation afin que les utilisateurs de clavier puissent adopter l'éditeur. Les utilisateurs peuvent basculer ce comportement en utilisant Ctrl+Shift+M (Mac) / Ctrl+M manuellement lorsque cela est false . Par défaut: false |
| Nom | Paramètres | Description |
|---|---|---|
| saisir | (code) | Incendie lorsque le code est modifié. |
| clés | (event) | Cet événement est émis lorsqu'un événement Keydown se produit dans l'éditeur |
| Keyup | (event) | Cet événement est émis lorsqu'un événement de Keyup se produit dans l'éditeur |
| faire un clic | (event) | Cet événement est émis lorsque vous cliquez n'importe où dans l'éditeur |
| se concentrer | (event) | Cet événement est émis lors de la mise au point |
| se brouiller | (event) | Cet événement est émis lorsqu'il est flou |
Cette partie est tirée de react-simple-code-éditeur
Il fonctionne en superposant une syntaxe surlignée <pre> Block sur un <textarea> . Lorsque vous tapez, sélectionnez, copiez du texte, etc., vous interagissez avec le <textarea> sous-jacent, de sorte que l'expérience se sent native. Il s'agit d'une approche très simple par rapport aux autres éditeurs qui réimpliquent le comportement.
La mise en évidence de la syntaxe peut être effectuée par n'importe quelle bibliothèque tierce tant qu'elle renvoie HTML et est entièrement contrôlable par l'utilisateur.
Le vanille <textarea> ne prend pas en charge les caractères d'onglet d'insertion pour l'indentation, nous le réimplémentons donc en écoutant des événements keydown et en mettant à jour le texte. Une mise en garde avec une mise à jour programmatique du texte est que nous perdons la pile d'annulation, nous devons donc maintenir notre propre pile d'annulation. En conséquence, nous pouvons également implémenter un comportement d'annulation amélioré comme l'annulation de mots entiers similaires à des éditeurs comme VSCODE.
En raison de son fonctionnement, il a certaines limites:
<textarea> , modifier tout ce qui affecte la mise en page peut le désaligner.-webkit-text-fill-color: transparent , qui fonctionne dans tous les navigateurs modernes (même non-webkit tels que Firefox et Edge). Sur IE 10+, nous utilisons color: transparent qui ne cache pas le curseur. Le texte peut apparaître plus audacieux dans les navigateurs non pris en charge. réagi-code-code-éditeur
Mit
