Ajuda: Extensão: CodeMirror
 |
Nota: Ao editar esta página, você concorda em publicar suas contribuições no âmbito da licença CC0. Veja as páginas de ajuda sob domínio público para mais informações. | |
A extensão CodeMirror é um editor que fornece realce de sintaxe. It supports a variety of languages, notably MediaWiki wikitext, JavaScript, CSS, JSON and Lua. Isso pode facilitar a edição, usando cores e sombreamento para separar visualmente o texto simples de outras sintaxes, como links, predefinições e outras marcações de wikitexto.
Uso
Ativação
O CodeMirror pode ser ativado ao definir Ativar realce de sintaxe para wikitexto nas suas preferências.
No WikiEditor (também conhecido como editor de 2010, ativado com a preferência Ativar a barra de ferramentas de edição), ele também pode ser ativado ou desativado usando o botão de realce "
Sintaxe" na barra de ferramentas.
No editor de 2017, você pode ativar ou desativar o CodeMirror clicando no botão "Opções da página" 
na barra de ferramentas e, em seguida, selecionando "Realce de sintaxe".
Atalhos de teclado
You can review keyboard shortcuts by opening the help dialog with Ctrl+⇧ Shift+/.
| Lista de atalhos de teclado | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Recursos
Acesso às preferências
| Versão do MediaWiki: | ≥ 1.44 |
A maioria dos recursos documentados aqui pode ser desativada ou ativada por cada usuário individualmente.
Para abrir o painel de preferências, pressione Ctrl+⇧ Shift+, (ou ⌘ Command+⇧ Shift+, no macOS).
Se você usar o WikiEditor, também poderá acessar suas preferências do CodeMirror clicando no botão 
na seção Avançado da barra de ferramentas.
Suas preferências do CodeMirror serão lembradas em diferentes dispositivos e sessões.
Some preferences are only available in the "full" preferences dialog. This is accessible by clicking on todas as preferências link in the preferences panel, or directly by pressing Alt+⇧ Shift+,.
Editing MediaWiki Wikitexto often has different needs than editing proper "code" such as JavaScript or Lua. For this reason, preferences are stored separately for wikitext and non-wikitext, allowing you to customize the two experiences differently.
As of MediaWiki 1.46, all CodeMirror preferences are stored globally if Extension:GlobalPreferences is installed.
Correspondência de colchetes
Quando o cursor está diretamente ao lado de um colchete, o recurso destaca o colchete correspondente. Depending on the language, bracket matching may also work for other syntax structures, such as HTML tags.[1]
Double-clicking next to a bracket will select all the text between it. Triple-clicking will select the entire block of code encompassing the matching brackets.
Auto-close brackets and tags
| Versão do MediaWiki: | ≥ 1.46 |
In addition to simply highlighting matching brackets and tags, they can be inserted automatically as you type a new pair of brackets or tags.
Take for example <translate>...</translate> tags which must always have a start and end closing tag.
With the Ativar o fechamento automático de etiquetas HTML preference, you only have to type the starting <translate and when typing >, the matching </translate> is automatically inserted.
If you're also using the Ativar o preenchimento automático feature, then you likely only need to type as little as <tra to select the tag then autocomplete.
Dobramento de código
O dobramento de código permite recolher parâmetros de predefinições, tags de extensões e outros blocos de código. Isso pode facilitar bastante o gerenciamento de predefinições grandes e complexas.
Uso
Quando o cursor ou a seleção cobre qualquer parte de uma sintaxe compatível, um ícone de dica 
aparece logo acima do texto. Ao clicar nele, o código é recolhido, deixando visível apenas o nome da predefinição ou da tag.
O código dobrado exibirá o nome da predefinição ou da tag seguido do ícone de reticências 
. Clicar nesse ícone expandirá o código de volta ao seu estado original.
| Atalhos | Atalhos (Mac OS) | Descrição |
|---|---|---|
| Ctrl+⇧ Shift+[ | ⌘ Command+Alt+[ | Dobrar o código selecionado. |
| Ctrl+⇧ Shift+] | ⌘ Command+Alt+] | Desdobrar o código selecionado. |
| Ctrl+Alt+[ | Ctrl+Alt+[ | Recolher todo o código. |
| Ctrl+Alt+] | Ctrl+Alt+] | Expandir todo o código. |
Personalização
Se você quiser manter o atalho de teclado para dobrar templates, mas ocultar o componente visual, pode fazer isso adicionando o seguinte ao seu CSS pessoal:[2]
.cm-tooltip-fold {
display: none;
}
Preenchimento automático
| Versão do MediaWiki: | ≥ 1.44 |
This feature provides autocompletion when typing internal links, palavras mágicas, parser extension tags, and URL protocols.
For example, if you enter {{#, you should see a list of all parser functions that start with #.
Similarly, typing double underscores (__) will show a list of double-underscored magic words.
You can continue to type to narrow your search. Use the arrow keys to select the desired text, and hit the ↵ Enter or Tab ↹ key to make your selection.
Autocompletion also works for templates, internal links, and file links.
Linting
| Versão do MediaWiki: | ≥ 1.45 |
CodeMirror includes a linter. This performs static code analysis in real time, surfacing errors or other potential problems with your code without you having to save. This works for all languages supported by CodeMirror, including wikitext.
Linting is available as the Checar o código option in your CodeMirror preferences.
When enabled, you will see a status bar at the bottom of the editor listing the number of errors, warnings, and informational diagnostics.
Issues are underlined in the source text. Hovering over them or moving the cursor to the issues will reveal more information, and in some cases the linter may offer a button to quickly fix the issue.
On the opposite side of the status bar, you are shown the numbers for the current line number, character, and selection length.
See Help:Extension:CodeMirror/WikiLint for the list of the available lint rules for wikitext. In addition, linting is also provided by for a number of other modes:
| Mode[3] | Name | Method[4] |
|---|---|---|
mediawiki |
WikiLint | In-browser |
mediawiki |
Parsoid | API |
javascript |
ESLint | In-browser |
javascript |
Peast | API |
css |
Stylelint | In-browser |
css[5]
|
css-sanitizer | API |
json
|
Custom JSON linter | In-browser |
lua |
Luacheck | In-browser |
abusefilter |
Extensão:Filtro de abusos | API |
Note that while the linters are useful tools to assist with fixing various issues, they are not an authority and may have stylistic opinions not shared by all editors.
Opening links in wikitext
| Versão do MediaWiki: | ≥ 1.44 |
You can quickly open links specified in the wikitext. Do this by holding down the Ctrl key (or ⌘ Command on macOS) and clicking on a page title inside of link syntax, such as [[Main Page]].
Clicking this case would open Main Page in a new tab.
This feature also works for template names and file names.
Line numbering
When enabled, line numbers are automatically displayed in all editors. On the Wikimedia wikis, it is only enabled for specific namespaces of specific wikis.[6]
Line numbers will take into account any hidden lines, such as those through code folding.
Highlight the active line
| Versão do MediaWiki: | ≥ 1.44 |
In your CodeMirror preferences, you can select Destacar a linha ativa to enable this feature, which can make it easier to tell which line of text the cursor is on, especially on large pages.
Line wrapping
| Versão do MediaWiki: | ≥ 1.44 |
Line wrapping is the default behaviour in most editors. Sometimes you may want to disable this, especially when writing complex wikitext or other code. You can disable line wrapping in your CodeMirror preferences.
Multiple cursors and selections
You can add additional cursors or selections by holding the Ctrl key (or ⌘ Command on macOS) and clicking on the desired content or cursor placement. After doing so, any changes you make will be applied to all the selections at the same time.
You can also press Ctrl+d (or ⌘ Command+d on macOS) to select the next occurrence of the current selection or word, which create multiple selections. This can be useful as a quick find and replace feature.
Highlight references
The "Destacar o conteúdo de tags <ref>" preference will make all contents within <ref>...</ref> tags be highlighted with a pale green background color.
This helps differentiate reference content from prose.
In addition, the "Envolver todas as tags <ref> por padrão" preference will make all <ref>...</ref> tags folded when first starting an editing session.
Note this feature can be potentially slow, as it needs to scan the entire document. The slowness will only occur once when initially opening the editor.
Highlight special characters
By default, CodeMirror will highlight non-printable control characters and other characters such as non-breaking spaces. Control characters appear as a red dot, while non-breaking spaces are displayed as a faint gray dot. Hovering over these characters will show a tooltip stating which character it is.
If desired, you can disable this feature in your CodeMirror preferences.
Highlight whitespace
Enabling "Destacar espaços em branco" will highlight the whitespace characters with a gray dot, or a wide arrow for the tab character.
The "Destacar espaço no final da linha" setting will highlight spaces, tabs and other invisible characters at the end of a sentence.
Colorblind mode
For users who have difficulty distinguishing between colors, CodeMirror offers a colorblind-friendly mode.
This feature can be activated on wikis with CodeMirror enabled with Ativar esquema compatível com daltônicos para realce de sintaxe ao editar o wikitexto in your preferences.
With the colorblind-friendly scheme active, the colors of the following page elements change:
| Headings, symbols, signatures, section names, magic words | #E4A400 |
| Predefinições | #9C3A00 |
| HTML tags, references, mathematical expressions | #56B4E9 |
| Variáveis | #009E73 |
In addition, background highlights and colors are removed from all text and objects. Bolding and underlining behavior remains unaffected.
FAQ
Why doesn't the browser search work?
Nota:
As with all syntax highlighters, very large pages cannot be highlighted all at once without serious performance issues. For this reason, focus needs to be in the CodeMirror editor in order for searching to work, since the whole document isn't highlighted and so it is not visible to the browser's native search feature.
Here are some tips to help with searching:
- By default,[7] the focus should be placed on the editor on page load, including after previewing. You may need to wait a second or two for CodeMirror to load first.
- When focus is on the CodeMirror search, you can force use of the browser search by pressing Ctrl+F again.
- In other words, when focus is in the editor, you can hold Ctrl and press F twice to use the browser search instead of CodeMirror's.
- You can use access keys to put focus on the editor, using Alt+⇧ Shift+, or Alt+, (or Ctrl+⌥ Option+, on MacOS), depending on what browser your using.
- If your issue is mainly while previewing, you may benefit from enabling the "Mostrar a pré-visualização sem recarregar a página" preference, which speeds up previewing. The CodeMirror autofocus preference is also respected.
- In addition, you may enjoy the realtime preview feature, which will continually show a preview while retaining focus on the editor.
Why are some features missing in the 2017 wikitext editor?
Due to various technical conflicts, CodeMirror support in the Editor de wikitexto 2017 is limited.
Features such as code folding that change the appearance of the wikitext cannot feasibly be supported in the 2017 editor, because the 2017 editor needs focus on its editor for users to be able to use its toolbar and other contextual tools. Similarly, CodeMirror needs focus on its editor for its features to work.
To get around this, the CodeMirror editor is overlaid on top of the 2017 editor, with both editors running in parallel. For this reason the two editors need to visually match each other exactly, so only features that involve basic color changes such as the highlighting of references can be supported.
The 2017 editor also requires the viewport to be the full length of the document. This can cause significant performance issues, since CodeMirror has to highlight the entire document instead of only what is currently visible to the user. As a temporary solution, CodeMirror is automatically disabled on very large pages in order to prevent browser crashes and other performance problems that could hinder the editing experience.
Long-term, the hope is to rework the 2017 editor to be more compatible with CodeMirror.
How can I disable syntax highlighting entirely?
You can enable or disable all CodeMirror features including highlighting in your editing preferences (or in your global preferences). You have the option to enable CodeMirror only for wikitext, or only code (such as JavaScript and CSS pages), or both.
Note that using the " Sintaxe" button in WikiEditor (the 2010 editor) will toggle these same preferences.
How can I customize the colors?
Notas
- ↑ Highlighting of matching tags is not currently supported in wikitext, but auto-closing is.
- ↑ Your personal CSS is at Special:MyPage/common.css. You can also make your changes take effect globally if GlobalCssJs is installed. On Wikimedia wikis, your global CSS is at meta:Special:MyPage/global.css.
- ↑ The "mode" refers to the canonical language within CodeMirror. This is usually the same as the Content model. The
mediawikimode refers to wikitext. - ↑ API linters poll an external API, while in-browser linters can work without an internet connection.
- ↑
Works only for the
sanitized-csscontent model (TemplateStyles) - ↑
Controlled by the
$wgCodeMirrorLineNumberingNamespacesconfiguration setting. See Extension:CodeMirror#Configuration for more information. - ↑ The "Colocar o foco inicial no editor" feature is on by default but can be disabled in your CodeMirror preferences.