Skip to main content

Escaping code to be displayed in HTML/XHTML



    One of the most tedious things about blogging about Software Development is escaping your code so it can be displayed on your blog. This is especially true when it comes to XHTML (Blogger) as the parser might throw an exception and not display any of the page. One solution is to surround the code with <pre></pre> tags to alert the parser that the code is pre-formatted. However, this alone isn't simply enough especially when it comes to XHTML. So are we left to manually go through the code and escape every character that needs to be? No, I've developed a script that will handle this task.

What does it mean to escape a character?

    There are certain characters that cannot be used in an HTML/XHTML document as they already have a distinct purpose. For instance, the less than (<) and greater than (>) symbols are used to denote the start and end of a tag respectively (<body>). Therefore when we use them within our text, the parser believes they are the start and end of a tag which is obviously not the case. So, we would have to replace them with their "escaped" alternatives, &lt; and &gt; respectively.

Automating the process

    Instead of going through the code and manually changing out characters for their escaped equivalents, I've developed a script that can automate this process. I also created a web app for ease of use that can be found here. And here's the code on GitHub. Here's an example:

Input:

for(int i = 0; i < 10; i++){}

Output:

for(int i = 0; i &lt; 10; i++){}

    In the above example it only needed to escape the less than symbol, <, to its escaped equivalent, &lt;. But in more realistic scenarios it might have a whole class to iterate through and escape characters. Also, the application surrounds the text output in pre and code tags for proper HTML5 semantics and use.

Conclusion

    Now there is a tool for simply escaping code to be displayed in HTML/XHTML. I use it for my blog when I need to show code examples. You are free to use it as well, Enjoy!

Comments

Popular posts from this blog

Face detection and live filters

Live video filters are becoming a popular trend fueled by Facebook (through their purchase of Msqrd) and Snapchat incorporating the features into their apps. These filters apply images or animations to your face using face tracking software. This technology has been around for awhile but is becoming increasingly more common due to the powerful CPU's that our mobile phones now have. Google provides an API that provides face tracking abilities through the Google Play Services library called Mobile Vision. I'm going to use their API to build a basic live filter app. The end result will look something like this:


    The bounding box wraps around the detected face and the sunglasses are the filter I chose (which is just a PNG image) which are drawn over the eyes. You could use any PNG image (with alpha for the background) you want, you will just have to adjust the layout according to where the image should be displayed. As you move your head, the box and sunglasses are redrawn…

Setting Up Connection Pooling With Elastic Beanstalk

Amazon's Elastic Beanstalk is a service which automatically scales your application when needed. It uses Amazon's Elastic Compute Cloud (EC2) instances as deployable containers which when your app requires more resources more containers will be deployed. This removes the need to manually configure your EC2 instance whenever you need more connections or resources and attempts to add simplicity to the maintenance aspect of your application. So, when you get more users of your app, your app will scale accordingly.

    Unfortunately, along with the ability to scale automatically, comes less control and configuration. Things you would normally have the ability to configure to your liking, such as your server, you no longer can. Amazon attempts to address this issue with configuration files. You can provide configuration files which can set up your server. These files are either written in JSON or the horrible format YAML. Though these files provide some level of control, you ca…

Android Guitar Tuner

Recently I created a guitar tuner application for Android that is written with pure Java (no C++ or NDK usage). The design was inspired by the Google Chrome team's guitar tuner web app using the WebAudio API. I wanted to code a version written natively for Android that didn't have to rely on a WebView, the WebAudio APIs, or server-side logic. Also, I wanted this application to be available to as many versions of Android as possible (whereas the WebAudio API may only be supported in more recent versions of WebView available only on newer flavors of Android). So, I coded it from scratch. I used a portion of the open source TarsosDSP project (their YIN algorithm) to help with the pitch detection.

    The application is available in the Google Play Store for Android: https://play.google.com/store/apps/details?id=com.chrynan.guitartuner. The project is completely open source and the code can be found on the GitHub repository: https://github.com/chRyNaN/Android-Guitar-Tuner. Fi…