You know HTML
Knowing HTML is the ideal for the editor. Select the Source button to switch between HTML and WYSIWYG (What You See Is What You Get) modes. Please note, class designations (ie. table class="ArticleTable") have specific capitalization.
Use this Source button to switch between the two modes:

<p>Paragraphs go in paragraph tags.</p>
<ul>
<li>Unordered lists go in these tags</li>
</ul>
<code>All your variables, class names, properties, etc. must go inside</code>
<strong>If you really want to bold something, use this tag. But we don't like it</strong>
<em>All file names inside the article must be italicized: .zip, .cs, .html, etc.</em>
<img src="imagename.png" />
Headings must be used like this
<h2>Main Headings</h2>
<h3>Sub Heading to h2 Heading - a Sub Topic to the Previous Topic</h3>
<h4>Sub Heading to h3 Heading - a Sub Topic to the Previous Topic</h4>
<h5>Sub Heading to h4 Heading - a Sub Topic to the Previous Topic</h5>
<div class="Caption">Captions go in this div class</div>
<table class="ArticleTable">
<thead>
<tr>
<td>Tables with borders. This cell a bolded and colorized border because of thead</td>
<td>This cell in this row ALSO has a bolded and colorized border because of thead</td>
</tr>
</thead>
<tr>
<td>This cell in this row is not bolded and colorized</td>
<td>Neither is this one</td>
</tr>
</table>
<table class="ArticleTableNoBorder">
<tr>
<td>This table has no borders</td>
<td>This table has no borders</td>
</tr>
</table>
You don't need to worry about colorizing your articles. We have a colorizer that takes care of this for you. If your article already contains colorization then don't worry - the colorizer cleans out all previous colorizing before recolorizing the entire article
<pre lang="cs">int myVar = 0;</pre>
The currently supported languages are:
- ASM (lang="asm")
- ASP (lang="asp")
- ASP.NET (lang="aspnet")
- BAT / CMD (lang="bat")
- C# (lang="cs")
- C++ (lang="C++")
- C++/CLI (lang="mc++")
- COBOL (lang="cobol")
- CSS (lang="css")
- Dart (lang="dart")
- F# (lang="f#")
- FORTRAN (lang="fortran")
- HTML (lang="html")
- Java (lang="java")
- Kotlin (lang="kotlin")
- JavaScript (lang="jscript")
- Lua (lang="lua")
- MSIL (lang="msil")
- MIDL (lang="midl")
- Objective C (lang="objc")
- Pascal (lang="pascal")
- PERL (lang="perl")
- PHP (lang="php")
- PowerShell (lang="powershell")
- Python (lang="python")
- Razor (lang="razor")
- Scala (lang="scala")
- Shell (lang="shell")
- SQL (lang="sql")
- Swift (lang="swift")
- Terminal (lang="terminal")
- TypeScript (lang="typescript")
- VB.NET (lang="vb.net")
- VBScript (lang="vbscript")
- XML (lang="xml")
Other languages can be added on request.
Colorizing works on PRE and CODE tags. If you have a block (or line) of text you don't wish to be coloured, set the lang
value as "text".
If you have the same code snippet shown in multiple languages (eg C# and VB versions of the same code) you can wrap multiple PRE blocks inside a <div class="code-samples"> and have the multiple code blocks appear in a tabbed form, similar to MSDN
eg
<div class="code-samples">
<pre lang="C#">
...
</pre>
<pre lang="VB.NET">
...
</pre>
</div>
Just make sure you set the lang attribute correctly
You DON'T know HTML
You can paste your article into the editor and modify it using the buttons.
Bold,
Add Image,
Indicate Code in Paragraphs as Variables, Class Names, Properties,
Create Lists,
Add Link,
Remove Automatic Formatting of Original Text Application (like Word),
Insert Table.
There's also Cut, Paste, Redo, and Undo. Beyond these, we wouldn't recommend messing with other icons. CodeProject articles have very simple formatting, which is the way we (and more importantly, members) like it.