Un editor de código simple muerto con sintaxis destacado y números de línea. 3kb/z
El editor funciona tanto para Vue 2.x como para Vue 3.x y actualmente está en la rama que admite Vue 2.x. Vaya aquí para la versión compatible Vue 3.x
prism-editor.netlify.com
Varios editores de código basados en el navegador, como ACE, CodeMirror, Monaco, etc., proporcionan la capacidad de incrustar un editor de código completo en su página web. Sin embargo, si solo necesita un editor simple con una resaltación de sintaxis sin ninguna de las características adicionales, pueden ser exageradas, ya que generalmente no tienen una pequeña huella del tamaño del paquete. Esta biblioteca tiene como objetivo proporcionar un editor de código simple con sintaxis que resalte el soporte sin ninguna de las características adicionales, perfecta para insertas y formularios simples donde los usuarios pueden enviar código.
npm install vue-prism-editoro
yarn add vue-prism-editorDebe utilizar el editor con una biblioteca de terceros que proporciona resaltado de sintaxis. Por ejemplo, se verá como seguir con Prismjs:
Registre el componente localmente y úselo (recomendado)
< 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 >Tenga en cuenta que, dependiendo de su marcador de sintaxis, es posible que deba incluir CSS adicional para el resaltado de sintaxis para funcionar.
O registre el componente a nivel mundial
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles
Vue . component ( 'PrismEditor' , PrismEditor ) ;Uso del navegador (para 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 > | Nombre | Tipo | Por defecto | Opción | Descripción |
|---|---|---|---|---|
value V-Modelo | string | "" | - | Valor actual del editor, es decir, el código a mostrar |
| destacar | string => string | - | - | Devolución de llamada que recibirá texto para resaltar. Deberá devolver una cadena HTML con la resaltura de sintaxis utilizando una biblioteca como PrismJS. |
| readonamente | Boolean | false | - | Readonamente |
| lineros | Boolean | false | - | Si mostrar números de línea. Predeterminado false |
| Autostylelinenumbers | Boolean | true | - | Color del texto de los números de línea de coincidencia con el tema. Predeterminado true |
| tabsize | number | 2 | - | El número de caracteres para insertar al presionar la tecla TAB. Por ejemplo, para la sangría de 4 espacios, tabSize será 4 y insertSpaces será true . Valor predeterminado: 2 |
| insertos | boolean | true | - | Si usar espacios para la sangría. Valor predeterminado: true . Si lo establece en false , es posible que también desee establecer tabSize en 1 |
| ignoretabkey | boolean | false | - | Si el editor debe ignorar la tecla TAB presiona para que los usuarios de teclado puedan pasar el editor. Los usuarios pueden alternar este comportamiento usando Ctrl+Shift+M (Mac) / Ctrl+M manualmente cuando esto es false . Valor predeterminado: false |
| Nombre | Parámetros | Descripción |
|---|---|---|
| aporte | (code) | Incendios cuando se cambia el código. |
| llave | (event) | Este evento se emite cuando ocurre un evento de llave en el editor. |
| llave | (event) | Este evento se emite cuando ocurre un evento clave en el editor |
| hacer clic | (event) | Este evento se emite al hacer clic en cualquier parte del editor. |
| enfocar | (event) | Este evento se emite cuando Focus |
| difuminar | (event) | Este evento se emite cuando se borra |
Esta parte está tomada del editor react-simple-code
Funciona superponiendo una sintaxis resaltada <pre> bloque sobre un <textarea> . Cuando escribe, selecciona, copia texto, etc., interactúa con el subyacente <textarea> , por lo que la experiencia se siente nativa. Este es un enfoque muy simple en comparación con otros editores que vuelven a implementar el comportamiento.
La resaltura de sintaxis puede ser realizada por cualquier biblioteca de terceros siempre que devuelva HTML y el usuario sea totalmente controlable.
La vainilla <textarea> no admite insertar caracteres de pestaña para la sangría, por lo que lo reimplemamos escuchando eventos keydown y actualizando programáticamente el texto. Una advertencia con la actualización programada del texto es que perdemos la pila de deshacer, por lo que necesitamos mantener nuestra propia pila de deshacer. Como resultado, también podemos implementar un comportamiento de deshacer mejorado, como deshacer palabras completas similares a editores como VScode.
Debido a la forma en que funciona, tiene ciertas limitaciones:
<textarea> , cambiar cualquier cosa que afecte el diseño puede desalinarlo.-webkit-text-fill-color: transparent , que funciona en todos los navegadores modernos (incluso los que no son Webkit como Firefox y Edge). En IE 10+, usamos color: transparent que no oculta el cursor. El texto puede parecer más audaz en los navegadores no compatibles. reaccionador-codo-editor
MIT
