Help:Extension:CodeMirror/es
![]() |
Nota: Cuando editas esta página, aceptas liberar tu contribución bajo la licencia CC0. Para más información mira las páginas de ayuda de dominio público. | ![]() |
La extensión CodeMirror es un editor que proporciona resaltado de sintaxis. Soporta varios lenguajes, en particular wikitexto de MediaWiki, JavaScript, CSS, JSON y Lua. Esto puede facilitar la edición al emplear colores y sombreados para poder distinguir mejor entre el texto plano y otra sintaxis, como pueden ser enlaces, plantillas y otro marcado de wikitexto.
Forma de uso
Activación
CodeMirror puede activarse marcando la casilla Habilitar resaltado de sintaxis para edición de wikitexto
en tus preferencias.
En WikiEditor (también conocido como el editor de 2010, y que se activa marcando la casilla Activar la barra de herramientas de edición mejorada
) también puede activarse o desactivarse usando el botón " Sintaxis" de la barra de herramientas.
En el editor de 2017 puedes activar o desactivar CodeMirror pulsando el botón
("Opciones de página") de la barra de herramientas y eligiendo "Resaltado de sintaxis".
Atajos de teclado
You can review keyboard shortcuts by opening the help dialog with Ctrl+⇧ Shift+/.
Lista de atajos de teclado | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Características
Preferencias de CodeMirror
Versión de MediaWiki: | ≥ 1.44 |
Las mayoría de características aquí documentadas pueden activarse o desactivarse de forma individualizada.
Para abrir el panel de preferencias, pulsa Ctrl+⇧ Shift+, (o ⌘ Command+⇧ Shift+, en macOS).
Si estás usando WikiEditor , también puedes acceder a tus preferencias de CodeMirror pulsando el botón en la sección Avanzado de la barra de herramientas.
Tus preferencias de CodeMirror se guardarán y se tendrán en cuenta en futuras sesiones, incluso desde dispositivos distintos.
Control de paridad de corchetes

Cuando el cursor se encuentra justo al lado de un corchete, esta característica hace que se resalte su correspondiente par de apertura o cierre.
Pliegue de código
Versión de MediaWiki: | ≥ 1.43 |
El pliegue de código te permite plegar (ocultar) parámetros de plantillas, etiquetas de extensiones y otros bloques de código, lo que puede facilitar en gran medida el manejo de plantillas largas y complejas.
Forma de uso
Cuando un cursor o una selección cubren una parte cualquiera de código susceptible de ser plegado, aparece un icono emergente justo encima del texto. Pulsar el icono hará que se pliegue el código, dejando a la vista únicamente el nombre de la plantilla o etiqueta.
El código plegado de este modo se representará mediante el nombre de la plantilla o etiqueta seguido del icono de elipsis . Pulsar este icono hará que reaparezca el código que permanecía oculto.
Atajo | Atajo (macOS) | Descripción |
---|---|---|
Ctrl+⇧ Shift+[ | ⌘ Command+Alt+[ | Plegar el código seleccionado. |
Ctrl+⇧ Shift+] | ⌘ Command+Alt+] | Desplegar el código seleccionado. |
Ctrl+Alt+[ | Ctrl+Alt+[ | Plegar todo el código. |
Ctrl+Alt+] | Ctrl+Alt+] | Desplegar todo el código. |
Personalización
Si deseas poder usar el atajo de teclado para plegar código pero prescindir del componente visual, puedes hacerlo añadiendo lo siguiente a tu CSS personal:[1]
.cm-tooltip-fold {
display: none;
}
Autocompletado
Versión de MediaWiki: | ≥ 1.44 |

Esta característica proporciona el autocompletado de palabras mágicas , etiquetas de extensiones sintácticas y protocolos URL.
Si tecleas {{#
, deberías ver una lista de todas las funciones del intérprete cuyo nombre empieza por #
.
De modo similar, teclar dos signos de subrayado (__
) hará que aparezca una lista de palabras mágicas que los usan en su nombre.
Puedes seguir tecleando para refinar la búsqueda. Usa las teclas de movimiento del cursor para seleccionar el texto que te interese y pulsa ↵ Enter o Tab ↹ para confirmar tu elección.
Por forma predeterminada el autocompletado no funciona con nombres de plantillas, palabras mágicas o funciones del intérprete que no empiecen por #
o __
.
Para que el autocompletado funcione en estos casos, pulsa ⇧ Shift+↵ Enter después de teclear
{{
y los primeros caracteres de la plantilla, palabra mágica o función del intérprete que te interese.
El mismo atajo también funciona para activar el autocompletado de wikienlaces, incluyendo los enlaces a archivos.
Abrir enlaces en wikitexto
Versión de MediaWiki: | ≥ 1.44 |
Se pueden abrir rápidamente enlaces definidos en wikitexto. Hazlo manteniendo pulsada la tecla Ctrl (o ⌘ Command en macOS) y pulsando entonces en el título de una página indicado con sintaxis de enlace, como puede ser [[Main Page]]
.
Este ejemplo haría que se abriese Main Page en una nueva pestaña del navegador.
Esta característica también funciona con nombres de plantillas y de archivos.
Numeración de líneas

Cuando se activa, todos los editores muestran automáticamente números de línea. En los wikis de Wikimedia, esta característica sólo afecta a determinados espacios de nombres de wikis concretos.[2]
La numeración tiene en cuenta las líneas que se encuentran ocultas, tal como sucede al emplear pliegue de código.
Destacar la línea activa
Versión de MediaWiki: | ≥ 1.44 |
En tus preferencias de CodeMirror puedes marcar la casilla "Highlight the active line" para activar esta característica, que puede hacerte más fácil ver en qué línea se encuentra el cursor, especialmente en páginas con mucho contenido.
Rotura de líneas
Versión de MediaWiki: | ≥ 1.44 |
La rotura de líneas es el comportamiento predeterminado de la mayoría de editores de texto. Sin embargo, a veces quizá quieras desactivar esto, especialmente mientras escribes wikitexto o algún otro código que sea particularmente complejo. Puedes desactivar la rotura de líneas en tus preferencias de CodeMirror.
Múltiples cursores y selecciones
Puedes crear cursores y selecciones adicionales manteniendo pulsada la tecla Ctrl (o ⌘ Command en macOS) y pulsando entonces en el contenido que desees o en la posición que quieras para el cursor. Una vez hecho esto, cualquier cambio que hagas se aplicará a todas las selecciones al mismo tiempo.
También puedes pulsar Ctrl+d (o ⌘ Command+d en macOS) para elegir la siguiente coincidencia de la selección o palabra actual, creando así múltiples selecciones. Esto puede serte útil como una función rápida de búsqueda y sustitución.
Destacar caracteres especiales
De forma predeterminada CodeMirror destaca los caracteres de control no imprimibles, así como otros caracteres tales como el espacio duro. Los caracteres de control aparecen como un punto rojo, mientras que los espacios duros se muestran como un punto ligeramente gris. Si detienes el puntero del ratón sobre uno de estos caracteres, aparecerá una nota para indicarte de qué carácter se trata.
Si lo prefieres, puedes desactivar esta característica en tus preferencias de CodeMirror.
Modo daltónico
Para los usuarios que tienen dificultades para distinguir los colores, CodeMirror ofrece un modo que les resultará útil. Esta característica puede utilizarse en wikis donde esté activada la opción "Usar un esquema de colores accesible para daltónicos en el resaltador de sintaxis al editar código wiki" de CodeMirror como parte de tus preferencias.
Con el esquema de colores para daltónicos activo, los colores de estos elementos de las páginas serán distintos:
Encabezamientos, símbolos, firmas, nombres de secciones, palabras mágicas | #E4A400 |
Plantillas | #9C3A00 |
Etiquetas HTML, referencias, expresiones matemáticas | #56B4E9 |
Variables | #009E73 |
Además, el color y resaltado de los fondos desaparece de todos los textos y objetos. El uso de negritas y signos de subrayado permanece igual.
Aislamiento de texto bidireccional
En páginas donde el texto se lee y escribe de derecha a izquierda, CodeMirror puede aislar las etiquetas HTML (entre otras) como texto bidireccional, lo que puede mejorar la legibilidad. El algoritmo estándar para la presentación de texto coloca signos de puntuación neutrales en el texto de derecha a izquierda en el lado equivocado. Gracias al aislamiento bidireccional podemos corregir esto para que el texto resulte más legible:
![]() |
![]() |
Personalización de colores y estilos
Los colores y estilos empleados por CodeMirror pueden modificarse definiendo tus propias hojas de estilos para las clases que se indican a continuación, utilizando para ello tu CSS personal.[1] Por favor, ten en cuenta que cambiar ciertas cosas como pueden ser la altura de las líneas o el tamaño del tipo de letra puede no funcionar en el editor de wikitexto de 2017.
Clase(s) CSS | Elemento | Estilo de CodeMirror |
---|---|---|
.cm-mw-skipformatting | espacio por delante | foo bar |
.cm-mw-list | asterisco o símbolo numérico | * foo bar, # foo bar |
.cm-mw-signature, .cm-mw-hr |
firma, línea horizontal | ∼∼∼∼, ---- |
.cm-mw-indenting | signos de dos puntos | ::: foo bar |
.cm-mw-html-entity | entidades HTML | & |
.cm-mw-comment | comentarios HTML | <!-- comment --> |
.cm-mw-apostrophes-bold, .cm-mw-apostrophes-italic |
negritas y cursiva | '''bold''' ''italic'' |
Encabezamientos | ||
.cm-mw-section-1 | encabezamiento de nivel 1[3] | = Heading = |
.cm-mw-section-2 | encabezamiento de nivel 2[3] | == Heading == |
.cm-mw-section-3 | encabezamiento de nivel 3 | === Heading === |
.cm-mw-section-4 | encabezamiento de nivel 4 | ==== Heading ==== |
.cm-mw-section-5 | encabezamiento de nivel 5 | ===== Heading ===== |
.cm-mw-section-6 | encabezamiento de nivel 6 | ====== Heading ====== |
.cm-mw-section-header | signos de igualdad | == |
Plantillas | ||
ejemplo | {{cite book|title=foo bar}} | |
.cm-mw-template | otro contenido de la plantilla | foo bar |
.cm-mw-template-name | nombre de la plantilla | cite book |
.cm-mw-template-argument-name | parámetros de la plantilla | title= |
.cm-mw-template-delimiter | barra vertical | | |
.cm-mw-template-bracket | llaves de apertura y cierre | {{ }} |
.cm-mw-template-ground .cm-mw-template2-ground .cm-mw-template3-ground |
plantilla al completo (el número es el nivel de anidamiento) |
{{foo|{{cite book|title=foo bar}}}} |
Variables | ||
ejemplo | {{{foo|bar}}} | |
.cm-mw-templatevariable | variable | bar |
.cm-mw-templatevariable-name | nombre de variable entre llaves triples | foo |
.cm-mw-templatevariable-bracket | llaves de apertura y cierre | {{{ }}} |
.cm-mw-templatevariable-delimiter | barra vertical | | |
Funciones del intérprete | ||
ejemplo | {{#assessment: A | High }} | |
.cm-mw-parserfunction | parámetros de la función | High |
.cm-mw-parserfunction-name | nombre de la función | PAGENAME #invoke |
.cm-mw-parserfunction-bracket | llaves de apertura y cierre | {{ }} |
.cm-mw-parserfunction-delimiter | delimitador | : |
Etiquetas de extensiones | ||
Nota: Dentro de sus propias etiquetas, las extensiones pueden usar sus propios estilos y reglas para destacar texto. | ||
ejemplo | <poem style="padding: 1em;">string whole line string</poem> | |
.cm-mw-exttag | texto dentro de las etiquetas | string |
.cm-mw-exttag-name, .cm-mw-ext-poem[4] |
nombre de etiqueta | poem |
.cm-mw-exttag-bracket | corchetes de apertura y cierre | < > |
.cm-mw-tag-ref | contenido de referencias | <ref>{{cite web|url=https://example.org}}</ref> |
.cm-mw-exttag-attribute .cm-mw-exttag-attribute-value |
atributos de referencias | style="padding: 1em;" |
Etiquetas HTML | ||
ejemplo | <span style="foo">foo bar</span> | |
.cm-mw-htmltag-name | etiqueta HTML | span |
.cm-mw-htmltag-bracket | corchetes de apertura y cierre | < > |
.cm-mw-htmltag-attribute .cm-mw-htmltag-attribute-value |
parámetros y valores | style="foo" |
superíndice subíndice |
foo<sup>bar</sup> foo<sub>bar</sub> | |
Texto preformateado | ||
.cm-mw-tag-pre | texto preformateado | <pre>foo bar</pre> |
.cm-mw-tag-nowiki | texto nowiki | <nowiki>foo bar</nowiki> |
Enlaces internos | ||
ejemplo | [[foo bar]] [[foo#section|bar]] | |
.cm-mw-link-pagename | destino de enlace interno | foo bar |
.cm-mw-link | carácter # | #section |
.cm-mw-link-tosection | caracteres después de # | #section |
.cm-mw-link-bracket | corchetes de apertura y cierre | [[ ]] |
.cm-mw-link-text | etiqueta de enlace | (no se aplica formato adicional) |
.cm-mw-link-delimiter | barra vertical | | |
.cm-mw-pagename | destinos de enlace interno | foo bar |
Enlaces externos | ||
ejemplo | https://www.example.org [https://www.example.org] [https://www.example.org example.org] | |
.cm-mw-extlink, .cm-mw-free-extlink |
destino de enlace externo | www.example.org |
.cm-mw-extlink-protocol, .cm-mw-free-extlink-protocol |
protocolo | https:// |
.cm-mw-extlink-text | etiqueta de enlace | (no se aplica formato adicional) |
.cm-mw-extlink-bracket | corchetes de apertura y cierre | [ ] |
Tablas | ||
ejemplo | {| class="wikitable" |- ! Header text !! Header text |- | Example || Example |} | |
.cm-mw-table-bracket | llaves y barra vertical de apertura y cierre | {| |} |
.cm-mw-table-delimiter | separadores de filas y columnas | | |- ! |
.cm-mw-table-definition .cm-mw-table-definition-value |
clases y estilos de tablas | class="wikitable" |
.cm-mw-table-caption | texto de título | |+ caption |
Otros | ||
.cm-mw-double-underscore | palabras mágicas | __TOC__ |
.cm-mw-list | punto y coma (listas de definiciones) | ;Foo:Bar |
.cm-special-char-nbsp | espacio duro | · · |
.cm-specialChar | caracteres de control | • |
Notas
- 1 2 Tu CSS personal está en Special:MyPage/common.css. También puedes hacer que tus cambios tengan un efecto global si está instalada la extensión GlobalCssJs . En los wikis de Wikimedia, tu CSS global está en meta:Special:MyPage/global.css.
- ↑
Esto depende del valor de la opción
$wgCodeMirrorLineNumberingNamespaces
de la configuración. Consulta Extension:CodeMirror#Configuration para más información. - 1 2 El tamaño no cambia en el editor de wikitexto de 2017.
- ↑ Donde "poem" es el nombre de la etiqueta.