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
For example:
<div class="code-samples">
<pre lang="C#">
...
</pre>
<pre lang="VB.NET">
...
</pre>
</div>
Just make sure you set the lang attribute correctly.
You can see additional HTML and CSS tricks to the article editor (like additional table formatting, DIV callouts, using multiple languages in code blocks, and LaTeX formatting) in our Tip, Article Formatting tips for CodeProject.
Important note: The article editor is designed for simplicity, under the idea we want all articles on CodeProject to be styled the same for easier reading comprehension. As such, the article editor strips out any HTML not mentioned in this article, or in Article Formatting tips for CodeProject. Don't wrap everything in SPAN blocks with crazy styles: our online editor (and our human editors) will most likely strip it all out.
Additionally, be careful about adding HTML tags to code blocks. For example, if you want to bold a line in a code block:
<div class="code-samples">
<pre lang="C#">
...
// some C# code
...
</pre>
<pre lang="VB.NET">
...
' some VB code
...
</pre>
</div>
Make sure that you manually bold one line at a time, like this:
<div class="<b>code-samples</b>">
<pre lang="C#">
...
// some C# code
...
</pre>
<pre lang="VB.NET">
...
' some VB code
...
</pre>
</div>
Do not start the bold tag on one line, and run it into another. The article editor sometimes has trouble with formatting it does not expect, not only will additional, unexpected format likely be stripped, it may create additional formatting problems. If you run into any problems or have any questions, please email our editors at submit@codeproject.com.
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.
