Help:Extension:CodeMirror/es

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

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

Algunos de estos atajos de teclado no se aplican al editor de 2017, que utiliza los suyos propios.

You can review keyboard shortcuts by opening the help dialog with Ctrl+⇧ Shift+/.

Lista de atajos de teclado
Atajo Atajo (macOS) Descripción
Navegación
Ctrl+ Alt+ Mover el cursor una palabra a la izquierda.
Ctrl+ Alt+ Mover el cursor una palabra a la derecha.
Alt+ Alt+ Mover las líneas seleccionadas una línea para arriba.
Alt+ Alt+ Mover las líneas seleccionadas una línea para abajo.
⇧ Shift+Alt+ ⇧ Shift+Alt+ Duplicar las líneas seleccionadas y mantener la selección de la primera copia.
⇧ Shift+Alt+ ⇧ Shift+Alt+ Duplicar las líneas seleccionadas y mantener la selección de la última copia.
Escape Escape Reducir varias selecciones al rango principal, o a un cursor si sólo hay una selección.
Estilos de texto
Ctrl+b ⌘ Command+b Marcar el texto seleccionado en negrita.
Ctrl+i ⌘ Command+i Marcar el texto seleccionado en cursiva.
Ctrl+k ⌘ Command+k Insertar un enlace.
Ctrl+⇧ Shift+6 ⌘ Command+⇧ Shift+6 Marcar el texto seleccionado como código de ordenador.
Ctrl+⇧ Shift+5 ⌘ Command+⇧ Shift+5 Marcar el texto seleccionado como tachado.
Ctrl+, ⌘ Command+, Marcar el texto seleccionado como subíndice.
Ctrl+. ⌘ Command+. Marcar el texto seleccionado como superíndice.
Ctrl+u ⌘ Command+u Marcar el texto seleccionado como subrayado.
Formato de párrafos
Ctrl+[ ⌘ Command+[ Eliminar el sangrado de las líneas seleccionadas.
Ctrl+] ⌘ Command+] Añadir sangrado a las líneas seleccionadas.
Ctrl+7 Ctrl+7 Marcar el texto seleccionado como preformateado.
Ctrl+8 ⌘ Command+8 Formatear como una cita extendida.
Ctrl+1-6 ⌘ Command+1-6 Añadir un encabezamiento del nivel correspondiente (del 1 al 6).
Búsqueda
Ctrl+f ⌘ Command+f Abrir el panel de búsqueda.
Ctrl+g ⌘ Command+g Encontrar la siguiente coincidencia con la cadena de búsqueda.
⇧ Shift+Ctrl+g ⇧ Shift+⌘ Command+g Encontrar la anterior coincidencia con la cadena de búsqueda.
Ctrl+d ⌘ Command+d Seleccionar la siguiente coincidencia de la selección o palabra actuales, creando múltiples selecciones.
Ctrl+Alt+g ⌘ Command+Alt+g Abrir el panel "Ir a la línea".
Inserción
Ctrl+↵ Enter ⌘ Command+↵ Enter Insertar una línea en blanco bajo la línea actual.
Ctrl+⇧ Shift+k ⌘ Command+⇧ Shift+k Insertar una referencia.
Ctrl+/ ⌘ Command+/ Insertar un comentario o convertir en comentario el texto seleccionado.
Pliegue de código
Ctrl+⇧ Shift+[ ⌘ Command+Alt+[ Plegar el código actualmente 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.
Otros
Ctrl+⇧ Shift+/ Ctrl+⇧ Shift+x Mostrar el diálogo de ayuda con los atajos de teclado.
Ctrl+⇧ Shift+, ⌘ Command+⇧ Shift+, Abrir el panel de preferencias de CodeMirror.
Ctrl+⇧ Shift+x ⌘ Command+⇧ Shift+x Pasar el editor a modo de escritura de derecha a izquierda y viceversa.
Modificadoras del cursor
Ctrl+click ⌘ Command+click Añadir un cursor o una selección adicional al área donde se pulsa.
Ctrl+click on page titles ⌘ Command+click on page titles Abrir enlaces en el código wikitexto.
Alt+click and drag Alt+click and drag Hacer una selección rectangular.

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

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
Pliegue de código en w:Barack Obama.

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.

Atajos de teclado
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
Ejemplo que muestra la característica de autocompletado con funciones del intérprete.

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

Fíjate en que la numeración de líneas tiene en cuenta las líneas que permanecen ocultas al ser parte de contenido que está plegado en este momento.

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

Esta característica está todavía en desarrollo. Visita phab:T358804 para más información.

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:

CodeMirror sin aislamiento bidireccional
CodeMirror con aislamiento bidireccional

Personalización de colores y estilos

Esto es una lista parcial de las clases CSS que soporta CodeMirror. La lista completa de definiciones de estilo predeterminadas está en Gerrit.

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. 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.
  2. Esto depende del valor de la opción $wgCodeMirrorLineNumberingNamespaces de la configuración. Consulta Extension:CodeMirror#Configuration para más información.
  3. 1 2 El tamaño no cambia en el editor de wikitexto de 2017.
  4. Donde "poem" es el nombre de la etiqueta.