Código en línea

Marca una palabra o una selección como código, para nombres como getHTMLCode() dentro de una oración. El texto se envuelve en un elemento <code> simple, y al pulsar de nuevo el botón se elimina ese formato.

Cómo activarlo

Esta función la ofrece el plugin inlinecode.js (también incluido en plugins/all_plugins.js). Su comando y elemento de la barra de herramientas es inlinecode (texto de ayuda "Inline code"). Dónde aparece el botón:

• toolbar: "full": en la fila principal, junto a superíndice y subíndice.
• En la barra predeterminada: en el menú "More" (⋮).
• En tu propia barra: añade inlinecode donde quieras.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/inlinecode.js"></script>

<div id="editor"><p>Call editor.getHTMLCode() to read the content, then save it.</p></div>
<script>
var editor = new RichTextEditor("#editor", {
    toolbar: "mytoolbar",
    toolbar_mytoolbar: "{bold,italic,underline,inlinecode}|{insertlink,insertcode}|{undo,redo}"
});
</script>

El plugin no tiene opciones. El comando se llama inlinecode porque code ya corresponde a la vista de código fuente HTML del editor.

Cómo usarlo

• Con una selección, el texto seleccionado se envuelve y permanece seleccionado, de modo que una segunda pulsación elimina de nuevo el formato de código.
• Solo con el cursor, el comando actúa sobre la palabra bajo el cursor: la secuencia de caracteres hasta el espacio más cercano a cada lado. El cursor permanece donde estaba. En un espacio vacío no sucede nada; no se crea ningún <code> vacío.
• Quitar el formato. Si todos los caracteres seleccionados ya son código, el comando quita el formato. Al quitarlo de una parte de una secuencia de código, esta se divide: seleccionar "content" dentro de <code>the content</code> y pulsar el botón deja <code>the </code>content. La cursiva o negrita dentro de la secuencia se conserva en el texto al que se quita el formato de código, pero las partes de código a cada lado pueden conservar una copia vacía: quitar el formato de código a "b" en <code>a <i>b</i> c</code> se guarda como <code>a <i></i></code><i>b</i><code><i></i> c</code>.
• Escritura. Con los atajos Markdown en línea del editor activados (markdownInlineEnabled, el valor predeterminado), escribir `npm install` produce <code>npm install</code> al escribir la comilla invertida de cierre. Esto funciona sin el plugin; el plugin añade el botón y la forma de quitar el formato de código.

Desde un script: editor.execCommand("inlinecode") o editor.toggleInlineCode() alternan el formato en la selección actual, y editor.isInlineCode() indica si el cursor está en código. El comando no tiene atajo de teclado.

Aspectos a tener en cuenta

• El marcado guardado es un elemento simple sin clase:

  <p>Call <code>editor.getHTMLCode()</code> to read the content, then save it.</p>

  Dos secuencias de código que quedan contiguas se combinan en un elemento, y una selección que solo contiene espacios no se envuelve.
• No se envuelve nada dentro de un bloque de código <pre> ni dentro de código existente, porque ambos ya son código. Usa insertcode para bloques de código de varias líneas.
• El fondo gris y la fuente monoespaciada proceden de la hoja de estilos del contenido del editor (runtime/richtexteditor_content.css, regla code { … }). La página que muestra el HTML guardado necesita su propio estilo para code .
• Los sanitizadores deben permitir el elemento code . La mayoría lo permiten de forma predeterminada.

Relacionado: referencia de elementos de la barra de herramientas, execCommand, demo de fragmentos de código.