Creating a layered design in an application is a fundamental element of modern software architecture. The goal is to promote the Separation of Concerns (SoC) design principle. Separation of Concerns The ideas behind SoC date back to Dijkstra's 1974 paper "On the role of scientific thought" . In computer science, separation of concerns (sometimes abbreviated as SoC) is a design principle for separating a computer program into distinct sections. Each section addresses a separate concern, a set of information that affects the code of a computer program. A concern can be as general as "the details of the hardware for an application", or as specific as "the name of which class to instantiate". A program that embodies SoC well is called a modular program. Modularity, and hence separation of concerns, is achieved by encapsulating information inside a section of code that has a well-defined interface. - Wikipedia SoC is a broad design principal th...
Formatting Code Samples Dynamically with Javascript
When creating technical articles for the web, it's often useful to include source code in the content. Properly formatting that source code for display can be major headache (depending on the platform).
Fortunately, there is a Javscript library called highlight.js that solves this problem for us and makes the code look great without much work.
You can add highlight.js to a custom application using npm (or yarn) or you can add the library to your content using a CDN.
In this sample, we're going to use CDNs since this feature is particularly useful for blogging platforms. At the top of your content/post/site, add the following:
To format text as code, simply wrap it in <pre> and <code> tags as follows:
<pre><code>INSERT SAMPLE CODE HERE</code></pre>
You can specify the language of the code by manually assigning the code tag's class as follows:
<pre><codeclass="sql">SELECT SYSDATE FROM DUAL;</code></pre>
The above HTML will display as:
SELECT SYSDATE FROM DUAL;
Here is the list of supported languages. Many languages are already included in the default highlight.js script. Note that some language formatting requires the loading of additional scripts.
For example, per the Support Languages page, COBOL would require the following script:
There are a number of themes to choose from. You can find the theme that best suites your existing content by experimenting with the Demo page at highlight.js. Once you find a theme, update the referenced stylesheet that you added above.
For example, replace default.min.css with dark.min.css as below:
