Creating code snippet view panel on a 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 application, 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 the Tags and Keywords
This makes a list object that contains a keyword or tag and the replacement CSS tag.

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.


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 replace the original keyword in the middle of the tags.


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.

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.
Created: 12/08/2016 Total Comment: 0

Comments

(Not Displayed)
Human validation
Enter 8061 number, before submitting to confirm your human
[Home] [All Blogs] [Contact] [Me]