Community Central
Register
Community Central
(+fr)
Tag: rte-source
No edit summary
Tag: Help
(44 intermediate revisions by 21 users not shown)
Line 1: Line 1:
{{Enabled on request}}
 
 
[[File:SyntaxHighlight-Comparison.png|thumb|250px|Wikitext with and without syntax highlighting]]
 
[[File:SyntaxHighlight-Comparison.png|thumb|250px|Wikitext with and without syntax highlighting]]
'''Syntax highlighting''' is a feature designed to improve readability of code on Wikia. It is currently being beta tested - you can read more about the progress of this '''[[User blog:Kirkburn/Syntax highlighting - helping you read and write code|here]]'''.
+
'''Syntax highlighting''' is a feature designed to improve readability of code on Fandom. It takes what is written in the editor and highlights the various types of code in different colours to help a reader identify which parts do what.
   
 
It exists in three main forms - simple wikitext highlighting, CSS/JS/template/Lua page highlighting, and as a tag usable on articles.
Essentially, syntax highlighting takes what is written in the editor and highlights the various types of code in different colours to help a reader identify what part does what.
 
   
 
== Editor highlighting ==
It exists in two main forms - wikitext highlighting and CSS/JS/Lua highlighting.
 
  +
=== Simple wikitext highlighting ===
 
==Wikitext highlighting==
 
 
[[File:SyntaxHighlight-WikitextDark.png|thumb|250px|Wikitext highlighting on a dark theme]]
 
[[File:SyntaxHighlight-WikitextDark.png|thumb|250px|Wikitext highlighting on a dark theme]]
[[Help:Wikitext|wikitext]] is the main building block of articles across Wikia, but it can often be hard to comprehend what you're seeing at a glance, especially on more complex pages.
+
[[Help:Wikitext|Wikitext]] is the main building block of articles across Fandom, but it can often be hard to comprehend what you're seeing at a glance, especially on more complex pages.
   
 
Syntax highlighting takes this code and adds blocks of colour behind the text.
 
Syntax highlighting takes this code and adds blocks of colour behind the text.
   
The main colors involved:
+
The main colors involved for dark theme wikis are:
  +
* <span style="background-color: #44466D; color: white;">&nbsp;dark lavender&nbsp;</span> = section headings, horizontal lines, bold and italic text
* blue = links
 
  +
* <span style="background-color: #245477; color: white;">&nbsp;dark blue&nbsp;</span> = internal links
* red = general wikitext and HTML
 
  +
* <span style="background-color: transparent; color: black;">&nbsp;transparent&nbsp;</span> = external links
* purple = section headings
 
  +
* <span style="background-color: #4D1A19; color: white;">&nbsp;brown&nbsp;</span> = general wikitext
* yellow/brown = templates
 
  +
* <span style="background-color: #662946; color: white;">&nbsp;dark red-violet&nbsp;</span> = tags
  +
* <span style="background-color: #474D23; color: white;">&nbsp;olive&nbsp;</span> = templates and HTML versions of special characters
  +
The main colors involved for light theme wikis are:
  +
* <span style="background-color: #E4E5F3; color: black;">&nbsp;blue-violet&nbsp;</span> = section headings, horizontal lines, bold and italic text
  +
* <span style="background-color: #D9EAF6; color: black;">&nbsp;light blue&nbsp;</span> = internal links
  +
* <span style="background-color: #DBECEB; color: black;">&nbsp;pale blue&nbsp;</span> = external links
  +
* <span style="background-color: #F8DBDA; color: black;">&nbsp;red&nbsp;</span> = general wikitext
  +
* <span style="background-color: #F6DDE9; color: black;">&nbsp;red-violet&nbsp;</span> = tags
  +
* <span style="background-color: #F0EBDB; color: black;">&nbsp;grey/brown&nbsp;</span> = templates and HTML versions of special characters
   
==CSS/JS/Lua highlighting==
+
=== Code highlighting ===
[[Help:CSS|CSS]], [[Help:JavaScript|JS]] and [[Help:Lua|Lua module]] pages are also affected, much like currently seen on [[Help:Editing Special:CSS|Special:CSS]]. It is active on user-specific CSS and JS pages, too - such as [[Help:Global CSS and JS|Special:MyPage/global.js]].
+
[[Help:CSS and JS customization|CSS, JS]], [[Help:Infoboxes|infobox template]], and [[Help:Lua|Lua module]] pages have a more advanced syntax highlighter active.
   
Beyond simple readability, these updated pages will also help you spot code issues, helping to prevent you from ending up with broken JavaScript, for example.
+
Beyond simple readability improvements, the highlighting will also help you spot code issues - helping to prevent JavaScript errors, for example.
 
<gallery hideaddbutton="true" orientation="landscape" widths="250">
 
  +
SyntaxHighlight-CSS.png | CSS syntax highlighting
<gallery hideaddbutton=true>
 
File:SyntaxHighlight-CSS.png|CSS syntax highlighting
+
SyntaxHighlight-LuaDark.png | Lua highlighting on a dark theme
File:SyntaxHighlight-LuaDark.png|Lua highlighting on a dark theme
 
 
</gallery>
 
</gallery>
   
  +
=== User preference ===
==See also==
 
  +
If you do not wish to use syntax highlighting, then simply visit the 'Editing' tab in your [[Help:Preferences|preferences]] and tick the "Do not show syntax highlighting in "Source mode" option.
  +
  +
This will switch off all forms of syntax highlighting, including on CSS and JS pages.
  +
  +
== Article highlighting ==
  +
The <code>&lt;syntaxhighlight&gt;</code> tag can be used on articles to syntax highlight sections of code for readers. A rough list of supported languages can be found on [[mw:Extension:SyntaxHighlight#Supported languages|MediaWiki.org]].
  +
  +
For example, CSS highlighting:
  +
  +
<pre>
  +
<syntaxhighlight lang="css">
  +
.class {
  +
font-size: 110%;
  +
}
  +
</syntaxhighlight>
  +
</pre>
  +
creates:
  +
  +
<syntaxhighlight lang="css">
  +
.class {
  +
font-size: 110%;
  +
}
  +
</syntaxhighlight>
  +
  +
Note that the syntax highlighting does not work when the page has been [[Help:Shared_Help|shared]]. <span class="shared-only">If you're reading this on a wiki other than Community Central, click [[w:Help:Syntax highlighting#Article_highlighting|here]] for a live example.</span>
  +
 
== See also ==
  +
* [[w:User blog:Kirkburn/Syntax highlighting - helping you read and write code|Original blog post announcement]]
 
* [[wikipedia:Syntax highlighting|Syntax highlighting]] on Wikipedia
 
* [[wikipedia:Syntax highlighting|Syntax highlighting]] on Wikipedia
* [[Help:CSS]], [[Help:JavaScript]] and [[Help:Lua]]
+
* [[Help:CSS and JS customization]] and [[Help:Lua]]
   
==Further Help and Feedback==
+
== Further help and feedback ==
 
{{Help and feedback section}}
 
{{Help and feedback section}}
  +
[[de:Hilfe:Syntaxhervorhebung]]
 
  +
[[es:Ayuda:Resaltado de sintaxis]]
  +
[[fi:Ohje:Koodin väritys]]
 
[[fr:Aide:Coloration syntaxique]]
 
[[fr:Aide:Coloration syntaxique]]
[[zh:Help:語法突顯]]
 
[[ru:Справка:Подсветка синтаксиса]]
 
[[ko:도움말:구문 강조]]
 
 
[[it:Aiuto:Syntax highlighting]]
 
[[it:Aiuto:Syntax highlighting]]
  +
[[ja:ヘルプ:シンタックスハイライト]]
 
 
[[ko:도움말:구문 강조]]
  +
[[nl:Help:Syntax markering]]
  +
[[pl:Pomoc:Podświetlanie składni]]
  +
[[pt:Ajuda:Realce de Sintaxe]]
 
[[ru:Справка:Подсветка синтаксиса]]
  +
[[tr:Yardım:Sözdizimi vurgulama]]
  +
[[vi:Trợ giúp:Làm nổi cú pháp]]
 
[[zh:Help:語法突顯]]
 
[[Category:Help]]
 
[[Category:Help]]
 
[[Category:CSS]]
 
[[Category:CSS]]

Revision as of 18:36, 22 April 2020

SyntaxHighlight-Comparison

Wikitext with and without syntax highlighting

Syntax highlighting is a feature designed to improve readability of code on Fandom. It takes what is written in the editor and highlights the various types of code in different colours to help a reader identify which parts do what.

It exists in three main forms - simple wikitext highlighting, CSS/JS/template/Lua page highlighting, and as a tag usable on articles.

Editor highlighting

Simple wikitext highlighting

SyntaxHighlight-WikitextDark

Wikitext highlighting on a dark theme

Wikitext is the main building block of articles across Fandom, but it can often be hard to comprehend what you're seeing at a glance, especially on more complex pages.

Syntax highlighting takes this code and adds blocks of colour behind the text.

The main colors involved for dark theme wikis are:

  •  dark lavender  = section headings, horizontal lines, bold and italic text
  •  dark blue  = internal links
  •  transparent  = external links
  •  brown  = general wikitext
  •  dark red-violet  = tags
  •  olive  = templates and HTML versions of special characters

The main colors involved for light theme wikis are:

  •  blue-violet  = section headings, horizontal lines, bold and italic text
  •  light blue  = internal links
  •  pale blue  = external links
  •  red  = general wikitext
  •  red-violet  = tags
  •  grey/brown  = templates and HTML versions of special characters

Code highlighting

CSS, JS, infobox template, and Lua module pages have a more advanced syntax highlighter active.

Beyond simple readability improvements, the highlighting will also help you spot code issues - helping to prevent JavaScript errors, for example.

User preference

If you do not wish to use syntax highlighting, then simply visit the 'Editing' tab in your preferences and tick the "Do not show syntax highlighting in "Source mode" option.

This will switch off all forms of syntax highlighting, including on CSS and JS pages.

Article highlighting

The <syntaxhighlight> tag can be used on articles to syntax highlight sections of code for readers. A rough list of supported languages can be found on MediaWiki.org.

For example, CSS highlighting:

<syntaxhighlight lang="css">
.class {
    font-size: 110%;
}
</syntaxhighlight>

creates:

.class {
    font-size: 110%;
}

Note that the syntax highlighting does not work when the page has been shared. If you're reading this on a wiki other than Community Central, click here for a live example.

See also

Further help and feedback