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.
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*]", ""));
}
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 replaces 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*]", "");
}
private static void setBreak()
{
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.