A suggestion for CodeProject TOC Style Fix

The Suggestion

Recently, I published an article with my new article-writing toolchain: All in One Toolchain for Article Writing with Visual Studio Code.

After the files are uploaded and source code ZIP files are referenced, there is only one step needed to write the entire body of the article: paste HTML code pre-created offline. This is a very convenient and reliable thing, now made available to all CodeProject authors.

More, exactly, this is so with one exclusion: I have only one fix to do manually: TOC styles. I cannot automate it, because it is prevented by CodeProject style.

Let’s consider this code sample:

Same thing without div (see below):

• Sample Heading
  • Sample Heading 2
    • Sample Heading 3
      • Sample Heading 4
        • Sample Heading 5

In first code sample, TOC is included in the div with the class=\"toc\". It fixes the problem of unwanted bullets in the CodeProject article TOC. The CSS implementation is simple:

div.toc ul { list-style-type: none; margin-top: 0; margin-bottom: 0; }

This CSS covers all levels of heading.

The solution isolates all other occurrences of ul; the fix is applied only to the TOC structure marked by that specialized div. The idea is simple: the author is encouraged to mark TOC by placing it inside div element with the class="toc". That’s all.

It solves another problem: current CodeProject style adds margins to the inner-level ul, which created the ugly look. Here is one example of an article:

Example of an article with poor TOC formatting.

Sample Heading

Sample Heading 2

Sample Heading 3

Sample Heading 4

Sample Heading 5