Simple Angular js code highlighter with Primsjs
Forked from el Mike's Pen AngularJS code Highlight.
<html ng-app="codepen"> | |
<head> | |
<meta charset="utf-8" /> | |
<title>AngularJS代码高亮棱镜</title> | |
</head> | |
<body> | |
<p>一些HTML代码 <em>before</em></p> | |
<ng-prism class="language-javascript"> | |
var mafonction = function() { | |
console.log('je ne sers à rien'); | |
} | |
</ng-prism> | |
<p>一些HTML代码<em>after</em></p> | |
</body> | |
<script src="https://ajax.c2cmalls.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script> | |
<script src="http://prismjs.com/prism.js" type="text/javascript" charset="utf-8"></script> | |
</html> |
var app = angular.module('codepen',[],['$interpolateProvider', | |
function($interpolateProvider) { | |
$interpolateProvider.startSymbol('[['); | |
$interpolateProvider.endSymbol(']]'); | |
}]); | |
app.directive('ngPrism',['$interpolate', function ($interpolate) { | |
"use strict"; | |
return { | |
restrict: 'E', | |
template: '<pre><code ng-transclude></code></pre>', | |
replace:true, | |
transclude:true | |
}; | |
}]); |
/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript&plugins=line-numbers */ | |
/** | |
* okaidia theme for JavaScript, CSS and HTML | |
* Loosely based on Monokai textmate theme by http://www.monokai.nl/ | |
* @author ocodia | |
*/ | |
code[class*="language-"], | |
pre[class*="language-"] { | |
color: #f8f8f2; | |
text-shadow: 0 1px rgba(0, 0, 0, 0.3); | |
font-family: Consolas, Monaco, 'Andale Mono', monospace; | |
direction: ltr; | |
text-align: left; | |
white-space: pre; | |
word-spacing: normal; | |
word-break: normal; | |
line-height: 1.5; | |
-moz-tab-size: 4; | |
-o-tab-size: 4; | |
tab-size: 4; | |
-webkit-hyphens: none; | |
-moz-hyphens: none; | |
-ms-hyphens: none; | |
hyphens: none; | |
} | |
/* Code blocks */ | |
pre[class*="language-"] { | |
padding: 1em; | |
margin: .5em 0; | |
overflow: auto; | |
border-radius: 0.3em; | |
} | |
:not(pre) > code[class*="language-"], | |
pre[class*="language-"] { | |
background: #272822; | |
} | |
/* Inline code */ | |
:not(pre) > code[class*="language-"] { | |
padding: .1em; | |
border-radius: .3em; | |
} | |
.token.comment, | |
.token.prolog, | |
.token.doctype, | |
.token.cdata { | |
color: slategray; | |
} | |
.token.punctuation { | |
color: #f8f8f2; | |
} | |
.namespace { | |
opacity: .7; | |
} | |
.token.property, | |
.token.tag, | |
.token.constant, | |
.token.symbol { | |
color: #f92672; | |
} | |
.token.boolean, | |
.token.number { | |
color: #ae81ff; | |
} | |
.token.selector, | |
.token.attr-name, | |
.token.string, | |
.token.char, | |
.token.builtin { | |
color: #a6e22e; | |
} | |
.token.operator, | |
.token.entity, | |
.token.url, | |
.language-css .token.string, | |
.style .token.string, | |
.token.variable { | |
color: #f8f8f2; | |
} | |
.token.atrule, | |
.token.attr-value { | |
color: #e6db74; | |
} | |
.token.keyword { | |
color: #66d9ef; | |
} | |
.token.regex, | |
.token.important { | |
color: #fd971f; | |
} | |
.token.important { | |
font-weight: bold; | |
} | |
.token.entity { | |
cursor: help; | |
} | |
pre.line-numbers { | |
position: relative; | |
padding-left: 3.8em; | |
counter-reset: linenumber; | |
} | |
pre.line-numbers > code { | |
position: relative; | |
} | |
.line-numbers .line-numbers-rows { | |
position: absolute; | |
pointer-events: none; | |
top: 0; | |
font-size: 100%; | |
left: -3.8em; | |
width: 3em; /* works for line-numbers below 1000 lines */ | |
letter-spacing: -1px; | |
border-right: 1px solid #999; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
.line-numbers-rows > span { | |
pointer-events: none; | |
display: block; | |
counter-increment: linenumber; | |
} | |
.line-numbers-rows > span:before { | |
content: counter(linenumber); | |
color: #999; | |
display: block; | |
padding-right: 0.8em; | |
text-align: right; | |
} |