Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML5

Creating Code Snippet View Panel on an HTML Page

4.00/5 (1 vote)
4 Oct 2016CPOL1 min read 7.9K  
How to create code snippet view panel on an HTML page

This is a simple project that I have created, which will allow me to display code snippets within my blog site.
This project is shared on my GitHub account and will be improved as I move on with my blog and other applications, that may inherit this project.

The Logic

This code will go through a string, picking out keywords or tags and converting them to CSS or HTML tags.
These CSS tags refer to tags within a CSS class included in the example project.

Step 1 - Set the Tags and Keywords

This makes a list object that contains a keyword or tag and the replacement CSS tag.

C#
private static void setQueryCodeKeywords()
{
    codeElementsKeywords = new Liststring, string>>();
    codeElementsKeywords.Add(new Tuple<string, string>("public", "methodType"));
    codeElementsKeywords.Add(new Tuple<string, string>("private", "methodType"));
    codeElementsKeywords.Add(new Tuple<string, string>("void", "methodType"));
    codeElementsKeywords.Add(new Tuple<string, string>("return", "methodType"));
    codeElementsKeywords.Add(new Tuple<string, string>("static", "propertyType"));
    codeElementsKeywords.Add(new Tuple<string, string>("string", "propertyType"));
    codeElementsKeywords.Add(new Tuple<string, string>("int", "propertyType"));
    codeElementsKeywords.Add(new Tuple<string, string>("decimal", "propertyType"));
    codeElementsKeywords.Add(new Tuple<string, string>("var", "propertyType"));
    codeElementsKeywords.Add(new Tuple<string, string>("object", "propertyType"));
    codeElementsKeywords.Add(new Tuple<string, string>("if", "ifStart"));
    codeElementsKeywords.Add(new Tuple<string, string>("else", "ifStart"));
    codeElementsKeywords.Add(new Tuple<string, string>("try", "propertyType"));
    codeElementsKeywords.Add(new Tuple<string, string>("Catch", "propertyType"));
    codeElementsKeywords.Add(new Tuple<string, string>("catch", "propertyType"));
    codeElementsKeywords.Add(new Tuple<string, string>("Dynamic", "propertyType"));
    codeElementsKeywords.Add(new Tuple<string, string>("dynamic", "propertyType"));
    codeElementsKeywords.Add(new Tuple<string, string>("Exception", "ExceptionColour"));
    codeElementsKeywords.Add(new Tuple<string, string>("using", "propertyType"));
}

private static void setQueryCodeTags()
{
    codeElementsTags = new Liststring, string>>();
    codeElementsTags.Add(new Tuple<string, string>(STARTTAG, ""));
    codeElementsTags.Add(new Tuple<string, string>(ENDTAG, ""));

    codeElementsTags.Add(new Tuple<string, string>("[CODECOMMENT*]", "//"));
    codeElementsTags.Add(new Tuple<string, string>("[/CODECOMMENT*]", ""));

    //*Added so render class does not break example
}

Step 2 - Replace the Tags

This replaces each tag within the global codeSubString string, with the CSS tag.

C#
private static void convertTags()
{
    foreach (var element in codeElementsTags)
        codeSubString = codeSubString.Replace(element.Item1, element.Item2);            
}

Step 3 - Replace the Keywords

This replaces each keyword only within the global codeSubString string and replaces the original keyword in the middle of the tags.

C#
private static void convertKeywords()
{
    foreach (var element in codeElementsKeywords)
    codeSubString = Regex.Replace(codeSubString, String.Format("\\b{0}\\b", element.Item1.Trim()).Trim()
        ,String.Format("<{0}>{1}", element.Item2, element.Item1));
}

Step 4 - Convert and Render HTML Required Extra Element

This then will check the final global string and replace the needed character or string keywords with the required HTML tags.

C#
private static void setQuotes()
{            
    renderedBody = renderedBody.Replace("[QUOTE*]", "");
    renderedBody = renderedBody.Replace("[/QUOTE*]", "");
}

private static void setSectionHeaders()
{
    renderedBody = renderedBody.Replace("[SECTIONHEADER*]", "");
    renderedBody = renderedBody.Replace("[/SECTIONHEADER*]", "");

    renderedBody = renderedBody.Replace("[HEADINGSUB*]", "");
    renderedBody = renderedBody.Replace("[/HEADINGSUB*]", "");
    
    renderedBody = renderedBody.Replace("[HEADINGSUBCOMMENT*]", "");
    renderedBody = renderedBody.Replace("[/HEADINGSUBCOMMENT*]", "");

    renderedBody = renderedBody.Replace("[HEADING*]", "");
    renderedBody = renderedBody.Replace("[/HEADING*]", "");

    //*Added so render class does not break example
}

private static void setBreak()
{//*Added so render class does not break example
    renderedBody = renderedBody.Replace("*\r\n*", "");
}

Implemented

This solution is implemented within my blog page render logic and this is done on publish or preview of my page.
The render logic does not run each time you view a page.

When you view a page, the action retrieves the render content (A Page table, with my back-end database). Then using the below Razor tag to translates the render to working HTML code.

Reason for Development

I've created my own to see if I could do it and to improve my CSS skills.
Now I can use it within my blog and in time, implement it into my DigiNotes application.

License

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