Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / CodeProject
(untagged)

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

5.00/5 (3 votes)
22 Apr 2022CPOL7 min read 12K  
This is the third article in our Article FAQ series. In this entry we do a deep dive in how to use the CodeProject article editor.
Here we look at: how to upload files, how to use them, how to use the article with or without HTML knowledge, and how to embed videos.

Table of Contents

  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!

    Image 1

  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.

    Image 2

    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:

    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).

    HTML
    <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:

    Image 3

    And make sure you have saved your draft:

    Image 4

    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:

    Image 5

  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:

    Image 6

    HTML
    <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

    HTML
    <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

    HTML
    <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:

    HTML
    <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:

    HTML
    <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:

    HTML
    <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. 5330382/BoldButton.png Bold, 5330382/ImageButton.png Add Image, 5330382/CodeButton.png Indicate Code in Paragraphs as Variables, Class Names, Properties, 5330382/ListButtons.png Create Lists, 5330382/LinkButton.png Add Link, 5330382/RemoveFormattingButton.png Remove Automatic Formatting of Original Text Application (like Word), 5330382/TableButton.png 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.

    Image 14

    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:

    HTML
    <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

    HTML
    <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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)