The content below are rendered by [Markdown APEX Plugin](https://apex.oracle.com/pls/apex/f?p=66154:1).
---
SyntaxHighlighter is what I use in my blogger. Here are the steps to implement code display with SyntaxHighlighter.
## Step 1: Add CSS and JS dependence
Here you can use the CDN static files provided from cloudflare with https enabled.
Add JS files in the page property JavaScript -> `File URLs`
```
https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js
https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js
https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js // for xml mode autoload error
```
Add CSS files in the page property CSS -> `File URLs`
```
https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css
https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css
```
## Step 2: Create Regions
Create the first Region with Static Content type and add the text below to the `Source`.
```sql
declare
cursor c_tasks is
select task_name, assigned_to
from eba_ut_chart_tasks
where rownum < 5;
begin
sys.htp.p('');
for a in c_tasks loop
sys.htp.p('- ' || a.task_name || ' (' || a.assigned_to || ')
' );
end loop;
sys.htp.p('
');
end;
```
**Note:**
* With few HTML tags which don't impact the page rendering (without HTML, BODY, IFRAME), you don't need escape them. But it's better to escape them.
Create the second Region with Static Content type and add the text below to the `Source`, for testing mixed HTML.
```text
<html style="color: green">
<!-- this is a comment -->
<head>
<title>Mixed HTML Example</title>
<style type="text/css">
h1 {font-family: comic sans; color: #f0f;}
div {background: yellow !important;}
body {
max-width: 50em;
margin: 1em 2em 1em 5em;
}
</style>
</head>
<body>
<h1>Mixed HTML Example</h1>
<script>
function jsFunc(arg1, arg2) {
if (arg1 && arg2) document.body.innerHTML = "achoo";
}
</script>
</body>
</html>
```
**Note:**
* Here in the text content, you need to escape HTML syntax characters as below
* *<* to `<`
* *>* to `>`
* *&* to `&`
There are many ways to escape HTML syntax characters. You can google many online tools or just use local text tools like notepadd++ or vs code. I prefer to use blogger post editor.
## Step 3: Create Item
Create an Item with Display Only type and add the PL/SQL code above to Source -> `Static Value`.
## Step 4: Render SyntaxHighlighter
Add the code below to page property JavaScript -> `Execute when Page Loads`
```js
(function() {
// Static files source base URI
var basePath = "https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/";
function getScript(name) {
return name.replace('@', basePath);
}
// auto load required brush js
// Note: this autoloader function somehow is not so stable.
// The workaround is to add static js files you need to File URLs in page property.
SyntaxHighlighter.autoloader(
['applescript', getScript('@shBrushAppleScript.min.js')],
['actionscript3', 'as3', getScript('@shBrushAS3.min.js')],
['bash', 'shell', getScript('@shBrushBash.min.js')],
['coldfusion', 'cf', getScript('@shBrushColdFusion.min.js')],
['cpp', 'c', getScript('@shBrushCpp.min.js')],
['c#', 'c-sharp', 'csharp', getScript('@shBrushCSharp.min.js')],
['css', getScript('@shBrushCss.min.js')],
['diff', 'patch', 'pas', getScript('@shBrushDiff.min.js')],
['erl', 'erlang', getScript('@shBrushErlang.min.js')],
['groovy', getScript('@shBrushGroovy.min.js')],
['java', getScript('@shBrushJava.min.js')],
['jfx', 'javafx', getScript('@shBrushJavaFX.min.js')],
['js', 'javascript', 'jscript', getScript('@shBrushJScript.min.js')],
['perl', 'pl', getScript('@shBrushPerl.min.js')],
['php', getScript('@shBrushPhp.min.js')],
['text', 'plain', getScript('@shBrushPlain.min.js')],
['py', 'python', getScript('@shBrushPython.min.js')],
['ruby', 'rails', 'ror', 'rb', getScript('@shBrushRuby.min.js')],
['sass', 'scss', getScript('@shBrushSass.min.js')],
['scala', getScript('@shBrushScala.min.js')],
['sql', getScript('@shBrushSql.min.js')],
['vb', 'vbnet', getScript('@shBrushVb.min.js')]
);
// set toolbar hide
SyntaxHighlighter.defaults["toolbar"] = false;
// initiate
SyntaxHighlighter.all();
})();
```
**Note:**
* Here xml brush cannot be auto loaded. That's why I add it to `File URLs` loaded as default.
Customize CSS effect in page property CSS -> `inline`. My blogger styles provided. :)
```css
body .syntaxhighlighter .code,
body .syntaxhighlighter .gutter {
font-size: 12px !important;
}
body .syntaxhighlighter {
border-top: 1px solid #ddd!important;
border-right: 1px solid #ddd!important;
border-bottom: 1px solid #ddd!important;
-webkit-border-radius: 1px;
padding: 1px;
border-left: 5px solid #358ccb;
}
body .syntaxhighlighter .gutter .line {
border-right: 1px solid #8b8989 !important;
}
body .syntaxhighlighter .gutter .line.highlighted {
background-color: #cac9c9 !important;
}
body .syntaxhighlighter .line.alt2 {
background-color: rgba(69, 142, 209, 0.04) !important;
}
body .syntaxhighlighter .line.alt1 {
background-color: rgba(255, 255, 255, 0.50) !important;
}
/* my blogger style
body .syntaxhighlighter .line.alt1 {
background-color: white !important;
}
body .syntaxhighlighter .line.alt2 {
background-color: #f7f7f7 !important;
}
body .syntaxhighlighter {
width: inherit !important;
}
body .syntaxhighlighter {
border: 1px solid #ddd!important;
-webkit-border-radius: 2px;
padding: 4px;
background-color: #eaeaeb !important;
}
body .syntaxhighlighter .gutter .line {
border-right: 3px solid #4696fc !important;
}
body .syntaxhighlighter .gutter .line.highlighted {
background-color: #3c85e3 !important;
}
*/
```
## References
* [SyntaxHighlighter Supported Brushes][1]
* [SyntaxHighlighter Manul][2]
* [PL/SQL sample code][3]
[1]: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
[2]: http://alexgorbatchev.com/SyntaxHighlighter/
[3]: https://apex.oracle.com/pls/apex/f?p=42:1908 (from Universal Theme Sample Application)