So if you've run into this post, you must be wondering how to apply code highlighting on popular blogging platform blogger.com and you're at the right place. Before we go to instructions here are some examples of highlighted code just for motivation. If you like it, you can proceed and integrate this handy feature.
// little c code
int main(int argc, char argv**) {
int i;
for(i = 0; i <= 99; i++)
fprintf(stdout, "%d\n", i);
return 0;
}
require_once 'Zend/Uri/Http.php';
namespace Location\Web;
interface Factory
{
static function _factory();
}
abstract class URI extends BaseURI implements Factory
{
abstract function test();
/**
* Returns a URI
*
* @return URI
*/
static public function _factory($stats = array(), $uri = 'http')
{
echo __METHOD__;
$uri = explode(':', $uri, 0b10);
$schemeSpecific = isset($uri[1]) ? $uri[1] : '';
$desc = 'Multi
line description';
// Security check
if (!ctype_alnum($scheme)) {
throw new Zend_Uri_Exception('Illegal scheme');
}
return [
'uri' => $uri,
'value' => null,
];
}
}
<!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
function $init() {return true;}
</script>
<body>
<div checked="" class="title" id="title">
Title</div>
<!-- here goes the rest of the page -->
</body>
@media screen and (-webkit-min-device-pixel-ratio: 0) {
body:first-of-type pre::after {
content: 'highlight: ' attr(class);
}
body {
background: linear-gradient(45deg, blue, red);
}
}
On the left menu on your blogger account go to templates click "edit html" just before closing of:
</header> tag add 3 lines (2 comment lines are there just to remind you what you've added and where, in case you what to remove code highlighting later...)
<!-- highlight.js -->
<link href='http://yandex.st/highlightjs/8.0/styles/default.min.css' rel='stylesheet'/>
<script src='http://yandex.st/highlightjs/8.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- / highlight.js -->click "save template" and you're done.
Ok what now? How do I use code highlighting?
It turn out it's quite easy, when you want to highlight some code, first you write it in WYSIWYG editor like you normally would and then switch to HTML mode of editing post, and put around your code html tags like this:
And your code will be heightlighted. If you want to specify what language you use in your code, that can be done like this:
<pre><code> your code ... </pre></code>And your code will be heightlighted. If you want to specify what language you use in your code, that can be done like this:
<pre><code class='hljs python'> your code here ... </pre></code>
where instead of python you add language of your choosing. Here are some possible languages of highlight.js lib:
python
c
cpp
java
objectivec
cs (C#)
sql
lisp
xml
css
scala
go
javascript
json
bash
...
There are others as well. For full list of code markup highlighting check out: highlightjs test page
Also visit http://highlightjs.org/ for more info and details about some advanced features of this library.
happy coding!
No comments:
Post a Comment