Pure JavaScript syntax highlighter - Use In Blogger / WP
Updated on 15 May
Syntax Highlighting is a technique to make your code on web-pages look beautiful and to highlight syntax of any programming language code you will have to install syntax highlighter plugin on your website.
There are different syntax highlighter available like prism.js and highlighter.js and today in this article I am going to share with you a pure JavaScript Syntax highlighter that can do the job of Syntax highlighting plugins.
Basically this is also a kind of syntax highlighter plugin in that enables you to highlight the syntax of different programming languages.
Although it does not support many languages but the most commonly used programming languages that are supported by this syntax highlighter are CSS, JavaScript, HTML etc. this is very lightweight syntax highlighter you can also make a separate JavaScript file of it and host it anywhere you want. You can host files on github for free
I loved this Syntax highlighter and I was trying to use this syntax highlighter in my website but somehow I was facing some kind of errors in my previous posts that's why I haven't used this one.
But I have created many other blogs where I have used this syntax highlighter it is very lightweight and it has light color scheme that is good for the website which have light color schemes.
Languages Supported:
- C
- JAVA
- Javascript
- Python
- HTML
- C#
- PHP
- CSS
This Syntax highlighter is not created by me this is the creativity of anyone else I found it on a website and I decided to share it with you cause I like it.
All the things that are share and found on this website are the things which I personally like and I think that you people will also like them
Ok now I have told you in the previous post I am a blogger user and now I will tell you how you can add the syntax highlighter in blogger you can follow the same steps in WordPress or any other platform it will work correctly.
Steps To Follow
- Go to Blogger Dashboard
- Go to Theme/Template Section
- Click Edit HTML
- Now Search for </body>
- Now copy the code provided below and paste it just above the tag which we have founded in step 4.
- Now Search For </head>
- Copy the css code provided below and paste it just above the tag we searched in above step.
- Save Theme/Template
To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
<script>
//<![CDATA[
window.Rainbow = function() {
function a(a) {
var b, c = a.getAttribute && a.getAttribute("data-language") || 0;
if (!c)
for (a = a.attributes, b = 0; b < a.length; ++b)
if ("data-language" === a[b].nodeName) return a[b].nodeValue;
return c
}
function b(b) {
var c = a(b) || a(b.parentNode);
if (!c) {
var f = /\blang(?:uage)?-(\w+)/;
(b = b.className.match(f) || b.parentNode.className.match(f)) && (c = b[1])
}
return c
}
function d(a, b) {
for (var c in f[k]) {
c = parseInt(c, 10);
if (a == c && b == f[k][c] ? 0 : a <= c && b >= f[k][c]) delete f[k][c], delete m[k][c];
if (a >= c && a < f[k][c] || b > c && b < f[k][c]) return !0
}
return !1
}
function e(a, b) {
return '<span class="' + a.replace(/\./g, " ") + (B ? " " + B : "") + '">' + b + "</span>"
}
function n(a, b, c, C) {
if ("undefined" === typeof a || null === a) C();
else {
var v = a.exec(c);
if (v) {
++E;
!b.name && "string" == typeof b.matches[0] && (b.name = b.matches[0], delete b.matches[0]);
var y = v[0],
l = v.index,
q = v[0].length + l,
g = function() {
function f() {
n(a, b, c, C)
}
0 < E % 100 ? f() : setTimeout(f, 0)
};
if (d(l, q)) g();
else {
var z = p(b.matches),
r = function(a, c, f) {
if (a >= c.length) f(y);
else {
var d = v[c[a]];
if (d) {
var l = b.matches[c[a]],
q = l.language,
g = l.name && l.matches ? l.matches : l,
k = function(b, d, l) {
var g;
g = 0;
var q;
for (q = 1; q < c[a]; ++q) v[q] && (g += v[q].length);
d = l ? e(l, d) : d;
y = y.substr(0, g) + y.substr(g).replace(b, d);
r(++a, c, f)
};
q ? u(d, q, function(a) {
k(d, a)
}) : "string" === typeof l ? k(d, d, l) : t(d, g.length ? g : [g], function(a) {
k(d, a, l.matches ? l.name : 0)
})
} else r(++a, c, f)
}
};
r(0, z, function(a) {
b.name && (a = e(b.name, a));
m[k] || (m[k] = {}, f[k] = {});
m[k][l] = {
replace: v[0],
"with": a
};
f[k][l] = q;
g()
})
}
} else C()
}
}
function p(a) {
var b = [],
c;
for (c in a) a.hasOwnProperty(c) && b.push(c);
return b.sort(function(a, b) {
return b - a
})
}
function t(a, b, c) {
function d(b, e) {
e < b.length ? n(b[e].pattern, b[e], a, function() {
d(b, ++e)
}) : A(a, function(a) {
delete m[k];
delete f[k];
--k;
c(a)
})
}++k;
d(b, 0)
}
function A(a, b) {
function c(a, b, f, d) {
if (f < b.length) {
++F;
var e = b[f],
g = m[k][e];
a = a.substr(0, e) + a.substr(e).replace(g.replace, g["with"]);
e = function() {
c(a, b, ++f, d)
};
0 < F % 250 ? e() : setTimeout(e, 0)
} else d(a)
}
var f = p(m[k]);
c(a, f, 0, b)
}
function u(a, b, f) {
var d = c[b] || [],
e = c[z] || [];
b = g[b] ? d : d.concat(e);
t(a.replace(/</g, "<").replace(/>/g, ">").replace(/&(?![\w\#]+;)/g, "&"), b, f)
}
function r(a, c, d) {
if (c < a.length) {
var e = a[c],
g = b(e);
return -1 < (" " + e.className + " ").indexOf(" rainbow ") || !g ? r(a, ++c, d) : (g = g.toLowerCase(), e.className += e.className ? " rainbow" : "rainbow", u(e.innerHTML, g, function(b) {
e.innerHTML = b;
m = {};
f = {};
D && D(e, g);
setTimeout(function() {
r(a, ++c, d)
}, 0)
}))
}
d && d()
}
function x(a, b) {
a = a && "function" == typeof a.getElementsByTagName ? a : document;
var c = a.getElementsByTagName("pre"),
d = a.getElementsByTagName("code"),
f, e = [],
g = [];
for (f = 0; f < c.length; ++f) c[f].getElementsByTagName("code").length ? c[f].innerHTML = c[f].innerHTML.replace(/^\s+/, "").replace(/\s+$/, "") : e.push(c[f]);
for (f = 0; f < d.length; ++f) g.push(d[f]);
r(g.concat(e), 0, b)
}
var m = {},
f = {},
c = {},
g = {},
k = 0,
z = 0,
E = 0,
F = 0,
B, D;
return {
extend: function(a, b, f) {
1 == arguments.length && (b = a, a = z);
g[a] = f;
c[a] = b.concat(c[a] || [])
},
c: function(a) {
D = a
},
a: function(a) {
B = a
},
color: function(a, b, c) {
if ("string" == typeof a) return u(a, b, c);
if ("function" == typeof a) return x(0, a);
x(a, b)
}
}
}();
document.addEventListener ? document.addEventListener("DOMContentLoaded", Rainbow.color, !1) : window.attachEvent("onload", Rainbow.color);
Rainbow.onHighlight = Rainbow.c;
Rainbow.addClass = Rainbow.a;
Rainbow.extend("c", [{
name: "meta.preprocessor",
matches: {
1: [{
matches: {
1: "keyword.define",
2: "entity.name"
},
pattern: /(\w+)\s(\w+)\b/g
}, {
name: "keyword.define",
pattern: /endif/g
}, {
name: "constant.numeric",
pattern: /\d+/g
}, {
matches: {
1: "keyword.include",
2: "string"
},
pattern: /(include)\s(.*?)$/g
}]
},
pattern: /\#([\S\s]*?)$/gm
}, {
name: "keyword",
pattern: /\b(do|goto|typedef)\b/g
}, {
name: "entity.label",
pattern: /\w+:/g
}, {
matches: {
1: "storage.type",
3: "storage.type",
4: "entity.name.function"
},
pattern: /\b((un)?signed|const)? ?(void|char|short|int|long|float|double)\*? +((\w+)(?= ?\())?/g
}, {
matches: {
2: "entity.name.function"
},
pattern: /(\w|\*) +((\w+)(?= ?\())/g
}, {
name: "storage.modifier",
pattern: /\b(static|extern|auto|register|volatile|inline)\b/g
}, {
name: "support.type",
pattern: /\b(struct|union|enum)\b/g
}]);
Rainbow.extend("java", [{
name: "constant",
pattern: /\b(false|null|true|[A-Z_]+)\b/g
}, {
b: {
1: "keyword",
2: "support.namespace"
},
pattern: /(import|package)\s(.+)/g
}, {
name: "keyword",
pattern: /\b(abstract|assert|boolean|break|byte|case|catch|char|class|const|continue|default|do|double|else|enum|extends|final|finally|float|for|goto|if|implements|import|instanceof|int|interface|long|native|new|package|private|protected|public|return|short|static|strictfp|super|switch|synchronized|this|throw|throws|transient|try|void|volatile|while)\b/g
}, {
name: "string",
pattern: /(".*?")/g
}, {
name: "char",
pattern: /(')(.|\\.|\\u[\dA-Fa-f]{4})\1/g
}, {
name: "integer",
pattern: /\b(0x[\da-f]+|\d+)L?\b/g
}, {
name: "comment",
pattern: /\/\*[\s\S]*?\*\/|(\/\/).*?$/gm
}, {
name: "support.annotation",
pattern: /@\w+/g
}, {
b: {
1: "entity.function"
},
pattern: /([^@\.\s]+)\(/g
}, {
name: "entity.class",
pattern: /\b([A-Z]\w*)\b/g
}, {
name: "operator",
pattern: /(\+{1,2}|-{1,2}|~|!|\*|\/|%|(?:<){1,2}|(?:>){1,3}|instanceof|(?:&){1,2}|\^|\|{1,2}|\?|:|(?:=|!|\+|-|\*|\/|%|\^|\||(?:<){1,2}|(?:>){1,3})?=)/g
}], !0);
Rainbow.extend([{
matches: {
1: [{
name: "keyword.operator",
pattern: /\=|\+/g
}, {
name: "keyword.dot",
pattern: /\./g
}],
2: {
name: "string",
matches: {
name: "constant.character.escape",
pattern: /\\('|"){1}/g
}
}
},
pattern: /(\(|\s|\[|\=|:|\+|\.)(('|")([^\\\1]|\\.)*?(\3))/gm
}, {
name: "comment",
pattern: /\/\*[\s\S]*?\*\/|(\/\/|\#)[\s\S]*?$/gm
}, {
name: "constant.numeric",
pattern: /\b(\d+(\.\d+)?(e(\+|\-)?\d+)?(f|d)?|0x[\da-f]+)\b/gi
}, {
matches: {
1: "keyword"
},
pattern: /\b(and|array|as|b(ool(ean)?|reak)|c(ase|atch|har|lass|on(st|tinue))|d(ef|elete|o(uble)?)|e(cho|lse(if)?|xit|xtends|xcept)|f(inally|loat|or(each)?|unction)|global|if|import|int(eger)?|long|new|object|or|pr(int|ivate|otected)|public|return|self|st(ring|ruct|atic)|switch|th(en|is|row)|try|(un)?signed|var|void|while)(?=\(|\b)/gi
}, {
name: "constant.language",
pattern: /true|false|null/g
}, {
name: "keyword.operator",
pattern: /\+|\!|\-|&(gt|lt|amp);|\||\*|\=/g
}, {
matches: {
1: "function.call"
},
pattern: /(\w+?)(?=\()/g
}, {
matches: {
1: "storage.function",
2: "entity.name.function"
},
pattern: /(function)\s(.*?)(?=\()/g
}]);
Rainbow.extend("javascript", [{
name: "selector",
pattern: /(\s|^)\$(?=\.|\()/g
}, {
name: "support",
pattern: /\b(window|document)\b/g
}, {
matches: {
1: "support.property"
},
pattern: /\.(length|node(Name|Value))\b/g
}, {
matches: {
1: "support.function"
},
pattern: /(setTimeout|setInterval)(?=\()/g
}, {
matches: {
1: "support.method"
},
pattern: /\.(getAttribute|push|getElementById|getElementsByClassName|log|setTimeout|setInterval)(?=\()/g
}, {
name: "string.regexp",
matches: {
1: "string.regexp.open",
2: {
name: "constant.regexp.escape",
pattern: /\\(.){1}/g
},
3: "string.regexp.close",
4: "string.regexp.modifier"
},
pattern: /(\/)(?!\*)(.+)(\/)([igm]{0,3})/g
}, {
matches: {
1: "storage",
3: "entity.function"
},
pattern: /(var)?(\s|^)(\S*)(?=\s?=\s?function\()/g
}, {
matches: {
1: "keyword",
2: "entity.function"
},
pattern: /(new)\s+(.*)(?=\()/g
}, {
name: "entity.function",
pattern: /(\w+)(?=:\s{0,}function)/g
}]);
Rainbow.extend("python", [{
name: "variable.self",
pattern: /self/g
}, {
name: "constant.language",
pattern: /None|True|False|NotImplemented|\.\.\./g
}, {
name: "support.object",
pattern: /object/g
}, {
name: "support.function.python",
pattern: /\b(bs|divmod|input|open|staticmethod|all|enumerate|int|ord|str|any|eval|isinstance|pow|sum|basestring|execfile|issubclass|print|super|bin|file|iter|property|tuple|bool|filter|len|range|type|bytearray|float|list|raw_input|unichr|callable|format|locals|reduce|unicode|chr|frozenset|long|reload|vars|classmethod|getattr|map|repr|xrange|cmp|globals|max|reversed|zip|compile|hasattr|memoryview|round|__import__|complex|hash|min|set|apply|delattr|help|next|setattr|buffer|dict|hex|object|slice|coerce|dir|id|oct|sorted|intern)(?=\()/g
}, {
matches: {
1: "keyword"
},
pattern: /\b(pass|lambda|with|is|not|in|from|elif|raise|del)(?=\(|\b)/g
}, {
matches: {
1: "storage.class",
2: "entity.name.class",
3: "entity.other.inherited-class"
},
pattern: /(class)\s+(\w+)\((\w+?)\)/g
}, {
matches: {
1: "storage.function",
2: "support.magic"
},
pattern: /(def)\s+(__\w+)(?=\()/g
}, {
name: "support.magic",
pattern: /__(name)__/g
}, {
matches: {
1: "keyword.control",
2: "support.exception.type"
},
pattern: /(except) (\w+):/g
}, {
matches: {
1: "storage.function",
2: "entity.name.function"
},
pattern: /(def)\s+(\w+)(?=\()/g
}, {
name: "entity.name.function.decorator",
pattern: /@([\w\.]+)/g
}, {
name: "comment.docstring",
pattern: /('{3}|"{3})[\s\S]*?\1/gm
}]);
Rainbow.extend("html", [{
name: "source.php.embedded",
matches: {
2: {
language: "php"
}
},
pattern: /<\?=?(?!xml)(php)?([\s\S]*?)(\?>)/gm
}, {
name: "source.css.embedded",
matches: {
1: {
matches: {
1: "support.tag.style",
2: [{
name: "entity.tag.style",
pattern: /^style/g
}, {
name: "string",
pattern: /('|")(.*?)(\1)/g
}, {
name: "entity.tag.style.attribute",
pattern: /(\w+)/g
}],
3: "support.tag.style"
},
pattern: /(<\/?)(style.*?)(>)/g
},
2: {
language: "css"
},
3: "support.tag.style",
4: "entity.tag.style",
5: "support.tag.style"
},
pattern: /(<style.*?>)([\s\S]*?)(<\/)(style)(>)/gm
}, {
name: "source.js.embedded",
matches: {
1: {
matches: {
1: "support.tag.script",
2: [{
name: "entity.tag.script",
pattern: /^script/g
}, {
name: "string",
pattern: /('|")(.*?)(\1)/g
}, {
name: "entity.tag.script.attribute",
pattern: /(\w+)/g
}],
3: "support.tag.script"
},
pattern: /(<\/?)(script.*?)(>)/g
},
2: {
language: "javascript"
},
3: "support.tag.script",
4: "entity.tag.script",
5: "support.tag.script"
},
pattern: /(<script(?! src).*?>)([\s\S]*?)(<\/)(script)(>)/gm
}, {
name: "comment.html",
pattern: /<\!--[\S\s]*?-->/g
}, {
matches: {
1: "support.tag.open",
2: "support.tag.close"
},
pattern: /(<)|(\/?\??>)/g
}, {
name: "support.tag",
matches: {
1: "support.tag",
2: "support.tag.special",
3: "support.tag-name"
},
pattern: /(<\??)(\/|\!?)(\w+)/g
}, {
matches: {
1: "support.attribute"
},
pattern: /([a-z-]+)(?=\=)/gi
}, {
matches: {
1: "support.operator",
2: "string.quote",
3: "string.value",
4: "string.quote"
},
pattern: /(=)('|")(.*?)(\2)/g
}, {
matches: {
1: "support.operator",
2: "support.value"
},
pattern: /(=)([a-zA-Z\-0-9]*)\b/g
}, {
matches: {
1: "support.attribute"
},
pattern: /\s(\w+)(?=\s|>)(?![\s\S]*<)/g
}], !0);
Rainbow.extend("csharp", [{
name: "constant",
pattern: /\b(false|null|true)\b/g
}, {
name: "keyword",
pattern: /\b(abstract|add|alias|ascending|as|base|bool|break|byte|case|catch|char|checked|class|const|continue|decimal|default|delegate|descending|double|do|dynamic|else|enum|event|explicit|extern|false|finally|fixed|float|foreach|for|from|get|global|goto|group|if|implicit|int|interface|internal|into|in|is|join|let|lock|long|namespace|new|object|operator|orderby|out|override|params|partial|private|protected|public|readonly|ref|remove|return|sbyte|sealed|select|set|short|sizeof|stackalloc|static|string|struct|switch|this|throw|try|typeof|uint|unchecked|ulong|unsafe|ushort|using|value|var|virtual|void|volatile|where|while|yield)\b/g
}, {
matches: {
1: "keyword",
2: {
name: "support.class",
pattern: /\w+/g
}
},
pattern: /(typeof)\s([^\$].*?)(\)|;)/g
}, {
matches: {
1: "keyword.namespace",
2: {
name: "support.namespace",
pattern: /\w+/g
}
},
pattern: /\b(namespace)\s(.*?);/g
}, {
matches: {
1: "storage.modifier",
2: "storage.class",
3: "entity.name.class",
4: "storage.modifier.extends",
5: "entity.other.inherited-class"
},
pattern: /\b(abstract|sealed)?\s?(class)\s(\w+)(\sextends\s)?([\w\\]*)?\s?\{?(\n|\})/g
}, {
name: "keyword.static",
pattern: /\b(static)\b/g
}, {
matches: {
1: "keyword.new",
2: {
name: "support.class",
pattern: /\w+/g
}
},
pattern: /\b(new)\s([^\$].*?)(?=\)|\(|;|&)/g
}, {
name: "string",
pattern: /(")(.*?)\1/g
}, {
name: "integer",
pattern: /\b(0x[\da-f]+|\d+)\b/g
}, {
name: "comment",
pattern: /\/\*[\s\S]*?\*\/|(\/\/)[\s\S]*?$/gm
}, {
name: "operator",
pattern: /(\+\+|\+=|\+|--|-=|-|<<=|<<|<=|=>|>>=|>>|>=|!=|!|~|\^|\|\||&&|&=|&|\?\?|::|:|\*=|\*|\/=|%=|\|=|==|=)/g
}, {
name: "preprocessor",
pattern: /(\#if|\#else|\#elif|\#endif|\#define|\#undef|\#warning|\#error|\#line|\#region|\#endregion|\#pragma)[\s\S]*?$/gm
}], !0);
Rainbow.extend("php", [{
name: "support",
pattern: /\becho\b/g
}, {
matches: {
1: "variable.dollar-sign",
2: "variable"
},
pattern: /(\$)(\w+)\b/g
}, {
name: "constant.language",
pattern: /true|false|null/ig
}, {
name: "constant",
pattern: /\b[A-Z0-9_]{2,}\b/g
}, {
name: "keyword.dot",
pattern: /\./g
}, {
name: "keyword",
pattern: /\b(die|end(for(each)?|switch|if)|case|require(_once)?|include(_once)?)(?=\(|\b)/g
}, {
matches: {
1: "keyword",
2: {
name: "support.class",
pattern: /\w+/g
}
},
pattern: /(instanceof)\s([^\$].*?)(\)|;)/g
}, {
matches: {
1: "support.function"
},
pattern: /\b(array(_key_exists|_merge|_keys|_shift)?|isset|count|empty|unset|printf|is_(array|string|numeric|object)|sprintf|each|date|time|substr|pos|str(len|pos|tolower|_replace|totime)?|ord|trim|in_array|implode|end|preg_match|explode|fmod|define|link|list|get_class|serialize|file|sort|mail|dir|idate|log|intval|header|chr|function_exists|dirname|preg_replace|file_exists)(?=\()/g
}, {
name: "variable.language.php-tag",
pattern: /(<\?(php)?|\?>)/g
}, {
matches: {
1: "keyword.namespace",
2: {
name: "support.namespace",
pattern: /\w+/g
}
},
pattern: /\b(namespace|use)\s(.*?);/g
}, {
matches: {
1: "storage.modifier",
2: "storage.class",
3: "entity.name.class",
4: "storage.modifier.extends",
5: "entity.other.inherited-class",
6: "storage.modifier.extends",
7: "entity.other.inherited-class"
},
pattern: /\b(abstract|final)?\s?(class|interface|trait)\s(\w+)(\sextends\s)?([\w\\]*)?(\simplements\s)?([\w\\]*)?\s?\{?(\n|\})/g
}, {
name: "keyword.static",
pattern: /self::|static::/g
}, {
matches: {
1: "storage.function",
2: "support.magic"
},
pattern: /(function)\s(__.*?)(?=\()/g
}, {
matches: {
1: "keyword.new",
2: {
name: "support.class",
pattern: /\w+/g
}
},
pattern: /\b(new)\s([^\$].*?)(?=\)|\(|;)/g
}, {
matches: {
1: {
name: "support.class",
pattern: /\w+/g
},
2: "keyword.static"
},
pattern: /([\w\\]*?)(::)(?=\b|\$)/g
}, {
matches: {
2: {
name: "support.class",
pattern: /\w+/g
}
},
pattern: /(\(|,\s?)([\w\\]*?)(?=\s\$)/g
}]);
Rainbow.extend("css", [{
name: "comment",
pattern: /\/\*[\s\S]*?\*\//gm
}, {
name: "constant.hex-color",
pattern: /#([a-f0-9]{3}|[a-f0-9]{6})(?=;|\s|,|\))/gi
}, {
matches: {
1: "constant.numeric",
2: "keyword.unit"
},
pattern: /(\d+)(px|em|cm|s|%)?/g
}, {
name: "string",
pattern: /('|")(.*?)\1/g
}, {
name: "support.css-property",
matches: {
1: "support.vendor-prefix"
},
pattern: /(-o-|-moz-|-webkit-|-ms-)?[\w-]+(?=\s?:)(?!.*\{)/g
}, {
matches: {
1: [{
name: "entity.name.sass",
pattern: /&/g
}, {
name: "direct-descendant",
pattern: />/g
}, {
name: "entity.name.class",
pattern: /\.[\w\-_]+/g
}, {
name: "entity.name.id",
pattern: /\#[\w\-_]+/g
}, {
name: "entity.name.pseudo",
pattern: /:[\w\-_]+/g
}, {
name: "entity.name.tag",
pattern: /\w+/g
}]
},
pattern: /([\w\ ,\n:\.\#\&\;\-_]+)(?=.*\{)/g
}, {
matches: {
2: "support.vendor-prefix",
3: "support.css-value"
},
pattern: /(:|,)\s*(-o-|-moz-|-webkit-|-ms-)?([a-zA-Z-]*)(?=\b)(?!.*\{)/g
}], !0)
//]]>
</script>
<style>
pre {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtPpfJanmpHDUYEVvKRHfUFYRiKka0kOiMmhpThokshU9t3SWdLbxppCdy9CV_jwGF7Lc5JlV1peh6xSjx7OHSogx5QHQeGgkY9wIZIjZLXZHsigGNWLhDsObo-SOC1VFFVdgMqdfaY0MQ/s1600/pre.png) repeat scroll 0 0 #FBF2F2;
color: #888;
display: block;
font: 12px/19px Consolas, 'Andale Mono', Courier, 'Courier New', monospace;
margin: 10px 0;
overflow: auto;
padding: 19px 19px 17px;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
user-select:all;
}
pre .comment {
color: #A57A4C
}
pre .variable.global,
pre .variable.class,
pre .variable.instance {
color: #DC3958
}
pre .constant.numeric,
pre .constant.language,
pre .constant.hex-color,
pre .keyword.unit {
color: #F79A32
}
pre .constant,
pre .entity,
pre .entity.class,
pre .support {
color: #F06431
}
pre .constant.symbol,
pre .string {
color: #889B4A
}
pre .entity.function,
pre .support.css-property,
pre .selector {
color: #8AB1B0
}
pre .keyword,
pre .storage {
color: #98676A
}
</style>
That's it now you have added this syntax highlighter code in blogger template do the same in wordpress but steps can be changed in wordpress i don't know that.
After adding these codes in your blogger blog now if you want to use this syntax highlighter you have to give class to every element where you want to use this syntax highlighter and that class will be the language name. Below is the list to specify class of different languages.
| Class | Language |
|---|---|
| data-language="c" | C |
| data-language="java" | JAVA |
| data-language="javascript" | Javascript |
| data-language="python" | Python |
| data-language="html" | HTML |
| data-language="csharp" | C# (C-Sharp) |
| data-language="php" | PHP |
| data-language="css" | CSS |
| data-language="" | Universal Selector |
This was the full list of classes now if you want to see the demo of this syntax highlighter you can see if by clicking the button below.
Demo
Conclusion:
In this article i have explained how to use this pure javascript syntax highlighter in blogger or wordpress to highlight code snippets on your web pages.I think you have got the thing that i want to share with you people so stay updated until i post new article and keep visiting and keep struggling.
Good Luck,
source:softwebtuts.com
0 comments for Pure JavaScript syntax highlighter - Use In Blogger / WP