e-gons/angular-markdown-editor.markdown

## angular-markdown-editor.markdown

      
    Raw
  

              angular-markdown-editor.markdown
            
          
    Angular Markdown Editor

GitHub Flavored Markdown Editor
A Pen by e-gons on CodePen.
License.

  
## index.html
<body ng-app="app" ng-controller="ctrl">
    <div class="left">
        <textarea id="txt" ng-model="my_markdown"></textarea>
    </div>
    <div class="right">
        <div class="markdown-body" marked="my_markdown"></div>
    </div>
</body>

## script.js
angular.module('app', ['hc.marked'])

angular.module('app').config(function(markedProvider) {
    markedProvider.setOptions({
        gfm: true,
        tables: true,
        highlight: function(code) {
            return hljs.highlightAuto(code).value;
        }
    });
})

angular.module('app').controller('ctrl', function($scope) {
    $scope.my_markdown = '# Angular Markdown Editor\n\n> GitHub Flavored Markdown Editor\n\n# Built with\n- **[marked](https://github.com/chjj/marked)** for Parsing Markdown\n- **[angular-marked](https://github.com/Hypercubed/angular-marked)** for easier usage of *marked*\n- **[highlight-js](https://github.com/isagalaev/highlight.js)** for code highlighting\n- **[github-markdown-css](https://github.com/sindresorhus/github-markdown-css)** for beautifying markdown output\n- **[highlight-js css](https://github.com/isagalaev/highlight.js/tree/master/src/styles)** for beautifying code output\n\n# Examples\n* Javascript\n\n```javascript\nfunction() {	\n  console.log("This is awesome!");\n}\n```\n\n* Bash\n\n```bash\n# step 1\nnpm install\n```\netc..\n\n# The End\n- Enjoy ~\n'

    //     Tab Support for Text-area
    function enableTab(id) {
        var el = document.getElementById(id);
        el.onkeydown = function(e) {
            if (e.keyCode === 9) {
                var val = this.value,
                    start = this.selectionStart,
                    end = this.selectionEnd;
                this.value = val.substring(0, start) + '\t' + val.substring(end);

                this.selectionStart = this.selectionEnd = start + 1;

                return false;

            }
        };
    };
    enableTab('txt')
})

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdn.rawgit.com/Hypercubed/angular-marked/master/dist/angular-marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>

## style.sass
.left
    position: fixed
    top: 0
    left: 0
    bottom: 0
    width: 50%
    box-shadow: -10px 2px 6px 10px rgba(0,0,0,0.4)
    textarea
        font-family: 'Consolas'
        background: #F5F5F5
        overflow: auto
        &:focus
            outline: none
        resize: none
        border: none
        padding: 30px
        width: 100%
        height: 100%
        box-sizing: border-box
.right
    position: fixed
    top: 0
    right: 0
    left: 50%
    bottom: 0
    overflow: auto
    padding: 30px


## styles
<link href="https://cdn.rawgit.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/isagalaev/highlight.js/master/src/styles/github.css" rel="stylesheet" />
	<body ng-app="app" ng-controller="ctrl">
	<div class="left">
	<textarea id="txt" ng-model="my_markdown"></textarea>
	</div>
	<div class="right">
	<div class="markdown-body" marked="my_markdown"></div>
	</div>
	</body>
	angular.module('app', ['hc.marked'])

	angular.module('app').config(function(markedProvider) {
	markedProvider.setOptions({
	gfm: true,
	tables: true,
	highlight: function(code) {
	return hljs.highlightAuto(code).value;
	}
	});
	})

	angular.module('app').controller('ctrl', function($scope) {
	$scope.my_markdown = '# Angular Markdown Editor\n\n> GitHub Flavored Markdown Editor\n\n# Built with\n- [marked](https://github.com/chjj/marked) for Parsing Markdown\n- [angular-marked](https://github.com/Hypercubed/angular-marked) for easier usage of marked\n- [highlight-js](https://github.com/isagalaev/highlight.js) for code highlighting\n- [github-markdown-css](https://github.com/sindresorhus/github-markdown-css) for beautifying markdown output\n- [highlight-js css](https://github.com/isagalaev/highlight.js/tree/master/src/styles) for beautifying code output\n\n# Examples\n* Javascript\n\n```javascript\nfunction() { \n console.log("This is awesome!");\n}\n```\n\n* Bash\n\n```bash\n# step 1\nnpm install\n```\netc..\n\n# The End\n- Enjoy ~\n'

	// Tab Support for Text-area
	function enableTab(id) {
	var el = document.getElementById(id);
	el.onkeydown = function(e) {
	if (e.keyCode === 9) {
	var val = this.value,
	start = this.selectionStart,
	end = this.selectionEnd;
	this.value = val.substring(0, start) + '\t' + val.substring(end);

	this.selectionStart = this.selectionEnd = start + 1;

	return false;

	}
	};
	};
	enableTab('txt')
	})
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
	<script src="https://cdn.rawgit.com/Hypercubed/angular-marked/master/dist/angular-marked.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
	.left
	position: fixed
	top: 0
	left: 0
	bottom: 0
	width: 50%
	box-shadow: -10px 2px 6px 10px rgba(0,0,0,0.4)
	textarea
	font-family: 'Consolas'
	background: #F5F5F5
	overflow: auto
	&:focus
	outline: none
	resize: none
	border: none
	padding: 30px
	width: 100%
	height: 100%
	box-sizing: border-box
	.right
	position: fixed
	top: 0
	right: 0
	left: 50%
	bottom: 0
	overflow: auto
	padding: 30px
	<link href="https://cdn.rawgit.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css" rel="stylesheet" />
	<link href="https://cdn.rawgit.com/isagalaev/highlight.js/master/src/styles/github.css" rel="stylesheet" />