CodeProject Article FAQ - Part 3: How to Use the CodeProject Article Editor

Table of Contents

• What files should I upload?
• How do I upload them?
• Where did my files go, and how do I use them?
• I have to finish my article later. How can I do this and not lose my progress?
• How do I use the article editor?
  • You know HTML
  • You DON'T know HTML
• How do I update my article?
• How do I embed GitHub gist code in my article?
• How do I embed video in my article?

1. What files should I upload?
    
   • Small screen shot (PNG/GIF/JPEG only, maximum width 640 pixels)
   • Zip file containing your source files (if appropriate)
   • Zip file containing your sample application (if appropriate)

   PLEASE NOTE: The only image files we accept are PNG, GIF, and JPG. Our article editor currently does not support SVG.



2. How do I upload them?
    

   On the far right of the screen you will see an "Upload Files" heading. Below it you will see a dotted box that indicates "Drag and Drop Files Here." Simply drag and drop your files into that box, and its done!

   

3. OK I uploaded my files. Where did my files go, and how do I use them?

   Each file can be added using the yellow arrow icon as shown below. Simply place the cursor in the article area where you want the file to be located, then click the arrow to place the image/file there.

   

   For zip files containing code there is a shortcut to adding files. Underneath "Current Files" you will see a insert button and link entitled "Add selected zip files to article." Simply click that link to automatically add neatly formatted files to your article.

   If you are adding files to the article without the button, you would do the following in the HTML:

   <ul class="download">
   <li><a href="filname.zip">Download source - X KB</a>
   </li>
   </ul>

   If you are adding images to the article without the button, you would simply do the following. (Note: It is important to keep paths within the href free of extraneous pathway. Simply add the filename inside the quotations).

   <img src="imagename.png" />

4. I have to finish my article later. How can I do this and not lose my progress?

   Check this teenie, tiny box:

   

   And make sure you have saved your draft:
   
   

   Later when you come back check "My Articles" here:

   Later when you are ready to finish return to the submission page and access your draft from here:

   

5. How do I use the article editor?

   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.

6. How do I update my article?

   Every article on CodeProject can be modified by their author if they are logged in. Simply click on the "Update Article" link just under the title of the article.

   

   This will take you to the article editor where you can make your desired changes. Afterwards, your article will return to the "Articles Needing Approval" queue where members and editors will approve your changes.

   If you have trouble with HTML you can send your update to us. Please use the "Get Article’s HTML" from the link in the upper right hand corner of your article, click on this and then save the HTML for your article using the File | Save menu in your browser. Ignore the stuff at the top and bottom of your page - you will see "Article Starts" and "Article Ends" tags in the HTML that point to where the actual text for your article is. Strip out everything above and below these markers and edit the HTML directly. When you are finished please send both updated HTML and zipped sourced code to us at submit[at]codeproject.com. Note: your article and code must be compressed into a .rar archive, or rename your zips to, say, MyArticle.nozip (Our email provider will not accept emails with .exe attachments, or .zips with .exe attachments). Also please remember to include the name of the article and its URL in the email body.

   If you only have a very small addition to make, or want to report spelling/grammar or link errors then you can just send these in as plain text.

7. How do I embed GitHub gist code in my article?

   Paste the gist code into the article using the Source mode. Something like:

   <script src=https://gist.github.com/ChrisMaunder/f30538d9b526249c2b2beeb7667a6ab5.js></script>

   And the editor will pick it up, and the system will display it as you’d expect.

8. How do I embed video in my article?

   To add a video to your articles simply do the following

   <iframe style="height:250px;width:100%" src="//youtube.com/embed/ABCD_EFG"></iframe>

   The article editor will show only a placeholder while viewing in WYSIWYG mode. The current list of supported video hosting sites are:

   • YouTube (youtube.com, youtu.be)
   • Vimeo
   • Channel 9 (channel9.msdn.com, sec.ch9.ms/ch9)
   • Vine (vine.co/v)

   If you want to start a YouTube video at a specific time, add a ?start= as shown below:

   <iframe style="width:560px; height:315px" src="https://www.youtube.com/embed/cbP2N1BQdYc?start=8"></iframe>

   Plus

   • Slideshare (slideshare.net)

   And as a bonus extra.

   • JS Fiddle (jsfiddle.net)

   Simply replace the src URL with the URL of the embedded resource, set the width/height, and we'll take it from there.