Código inline

Marca uma palavra ou uma seleção como código, para nomes como getHTMLCode() no meio de uma frase. O texto é envolvido em um elemento <code> simples, e pressionar o botão de novo o remove.

Ative o recurso

O recurso é o plugin inlinecode.js (também incluído em plugins/all_plugins.js). O comando e o item da barra de ferramentas dele são inlinecode (dica de ferramenta "Inline code"). Onde o botão aparece:

• toolbar: "full": na linha principal, ao lado de sobrescrito e subscrito.
• A barra de ferramentas padrão: no menu "More" (⋮).
• A sua própria barra de ferramentas: adicione inlinecode onde quiser.

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

O plugin não tem opções. O comando se chama inlinecode porque code já é a visualização do código-fonte HTML do editor.

Como usar

• Com uma seleção, o texto selecionado é envolvido e continua selecionado; assim, pressionar de novo remove o código.
• Só com o cursor, o comando age sobre a palavra sob o cursor: a sequência de caracteres até o espaço mais próximo de cada lado. O cursor fica onde estava. Em um ponto vazio, nada acontece; nenhum <code> vazio é criado.
• Remover. Se todos os caracteres selecionados já forem código, o comando remove o código. Remover parte de um trecho de código o divide: selecionar "content" dentro de <code>the content</code> e pressionar o botão deixa <code>the </code>content. Itálico ou negrito dentro do trecho continua no texto que deixa de ser código, mas as partes de código de cada lado podem ficar com uma cópia vazia dele: remover o código de "b" em <code>a <i>b</i> c</code> salva como <code>a <i></i></code><i>b</i><code><i></i> c</code>.
• Digitação. Com os atalhos de Markdown inline do editor ativados (markdownInlineEnabled, o padrão), digitar `npm install` gera <code>npm install</code> quando a crase de fechamento é digitada. Isso funciona sem o plugin; o plugin acrescenta o botão e a forma de remover o código.

Por script: editor.execCommand("inlinecode") ou editor.toggleInlineCode() alternam na seleção atual, e editor.isInlineCode() informa se o cursor está em código. Não há atalho de teclado para o comando.

O que você precisa saber

• A marcação salva é um elemento simples, sem classe:

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

  Dois trechos de código que acabam lado a lado são mesclados em um único elemento, e uma seleção que contém só espaços não é envolvida.
• Nada é envolvido dentro de um bloco de código <pre> nem dentro de um código existente, porque os dois já são código. Use insertcode para blocos de código com várias linhas.
• O fundo cinza e a fonte monoespaçada vêm da folha de estilo de conteúdo do editor (runtime/richtexteditor_content.css, regra code { … }). A página que exibe o HTML salvo precisa do próprio estilo para code.
• Os sanitizadores precisam permitir o elemento code. A maioria o permite por padrão.

Relacionados: referência de itens da barra de ferramentas, execCommand, demonstração de trechos de código.