angular-ivonet-markdown
Version:
AngularJS markdown directive with code highlighting and fully configurable
161 lines (141 loc) • 6.47 kB
HTML
<!--
~ Copyright 2015 Ivo Woltring <Webmaster@ivonet.nl>
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<html ng-app="MarkdownExampleApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.row textarea {
min-height: 50vh;
}
.markdown {
box-sizing: border-box;
height: 50vh;
overflow-y: scroll;
background-color: #E8EAF6;
}
table {
border-collapse: collapse;
border: solid 1pt;
}
table th {
border-collapse: collapse;
border: solid 1pt;
}
table tr {
border: solid 1pt;
}
table tr td {
border: solid 1pt;
text-align: center;
}
/*This is the highlight class now I used my own classPrefix (see in ivoMarkdownConfig below) */
.ivonet-keyword, .xml .ivonet-title {
color: #f5871f;
}
.ivonet-function, .ivonet-attribute {
color: firebrick;
}
.ivonet-string, .ivonet-value {
color: darkgreen;
}
</style>
<title>Markdown Example</title>
</head>
<body ng-controller="MarkdownController as mm">
<div class="container">
<div class="jumbotron">
<ivo-markdown>
# Introduction
This part of the website is generated by the markdown directive.
Just play around with the textarea...
* goto my [github](https://github.com/IvoNet/angular-ivonet-markdown) for the full project.
* goto my [www.ivonet.nl](http://www.ivonet.nl) for more goodness ;-)
</ivo-markdown>
</div>
<div class="row">
<div ivo-markdown="mm.markdown" class="col-sm-8 markdown"></div>
<textarea data-ng-model="mm.markdown" class="col-sm-4"></textarea>
</div>
</div>
<!--AngularJS / bootstrap depenencies-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--Just for some layout-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!--
Mandatory dependencies for the markdown directive:
bower install highlightjs --save
bower install angular-highlightjs --save
bower install angular-sanitize --save
bower install showdown --save
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script src="http://pc035860.github.io/angular-highlightjs/angular-highlightjs.min.js"></script>
<script src="https://cdn.rawgit.com/showdownjs/showdown/1.3.0/dist/showdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-sanitize.min.js"></script>
<!--
For the github extension:
bower install showdown-github --save
bower install showdown-table --save
bower install showdown-prettify --save
bower install showdown-github --save
bower install showdown-twitter --save
bower install showdown-target-blank --save
-->
<script src="https://cdn.rawgit.com/showdownjs/github-extension/master/dist/showdown-github.min.js"></script>
<script src="https://cdn.rawgit.com/showdownjs/table-extension/master/dist/showdown-table.min.js"></script>
<script src="https://cdn.rawgit.com/showdownjs/twitter-extension/master/dist/showdown-twitter.min.js"></script>
<script src="https://rawgit.com/IvoNet/showdown-target-blank/master/dist/showdown-target-blank.js"></script>
<!--
The directive in demo:
see https://github.com/IvoNet/angular-ivonet-markdown for the complete project
-->
<!--<script src="../src/markdown.directive.js"-->
<!--language="JavaScript"></script>-->
<script src="https://rawgit.com/IvoNet/angular-ivonet-markdown/master/src/markdown.directive.js"
language="JavaScript"></script>
<!--<script src="https://rawgit.com/IvoNet/angular-ivonet-markdown/master/dist/angular-ivonet-markdown.min.js"-->
<!--language="JavaScript"></script>-->
<!--inline example-->
<script>
(function () {
angular.module('MarkdownExampleApp', ['ivoMarkdown']).config(function (ivoMarkdownConfigProvider) {
ivoMarkdownConfigProvider.config({
tables: true,
parseImgDimensions: true,
simplifiedAutoLink: true,
tasklists: true,
smoothLivePreview: true,
strikethrough: true,
extensions: [
'twitter',
'targetblank'
]
});
ivoMarkdownConfigProvider.hljsOptions({classPrefix: 'ivonet-', tabreplace: ' '});
})
.controller('MarkdownController', MarkdownController);
function MarkdownController() {
this.markdown =
"# Hello there\n\n## Python code\n\n```python\n\nimport IvoNet\n\ndef hello():\n\tprint 'hello world'\n\tprint 'tab replaced by spaces'\n```\n\n## XML code\n```html\n<div class=\"foo\"><p>text</p></div>\n```\n\n## header 2\nand some normal text here\n\n* bullet 1\n* bullet *italic* 2\n * indented bullet in **bold**\n\n## Table\n\nThis table is doen by the table plugin:\n\n|Markdown | Less | Pretty |\n|---: | --: | ---: |\n|*Still* | `renders` | **nicely**|\n|1 | 2 | 3|\n\n## Tweet\n\nThis tweet name @ivonet is replaced by a complete link by the twitter extension \nBut the target=\"_blank\" attribute in the link is done by the targetblank extension.\n\n## Deleted text\n\nthis is ~~deleted text~~ brought to you by the github extension";
}
})();
</script>
</body>
</html>