<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/aktorou/pen/YWxorK?depth=everything&order=popularity&page=50&q=editable&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css'>
<style class="cp-pen-styles">html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: relative;
background: #72c3c3;
}
.editor-holder {
width: 800px;
height: 500px;
margin-top: 50px;
border-radius: 3px;
position: relative;
top: 0;
margin-left: -400px;
left: 50%;
background: #1f1f1f !important;
overflow: auto;
-webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.editor-holder.fullscreen {
width: 100%;
height: 100%;
margin: 0;
left: 0;
}
.editor-holder .toolbar {
width: 100%;
list-style: none;
position: absolute;
top: -2px;
margin: 0;
left: 0;
z-index: 3;
padding: 8px;
background: #afafaf;
}
.editor-holder .toolbar li {
display: inline-block;
}
.editor-holder .toolbar a {
line-height: 20px;
background: rgba(144, 144, 144, 0.6);
color: grey;
-webkit-box-shadow: inset -1px -1px 1px 0px rgba(0, 0, 0, 0.28);
box-shadow: inset -1px -1px 1px 0px rgba(0, 0, 0, 0.28);
display: block;
border-radius: 3px;
cursor: pointer;
}
.editor-holder .toolbar a:hover {
background: rgba(144, 144, 144, 0.8);
}
.editor-holder .toolbar a.active {
background: rgba(144, 144, 144, 0.8);
-webkit-box-shadow: none;
box-shadow: none;
}
.editor-holder .toolbar i {
color: #565656;
padding: 8px;
}
.editor-holder textarea, .editor-holder code {
width: 100%;
height: auto;
min-height: 450px;
font-size: 14px;
border: 0;
margin: 0;
top: 46px;
left: 0;
padding: 20px !important;
line-height: 21px;
position: absolute;
font-family: Consolas,Liberation Mono,Courier,monospace;
overflow: visible;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.editor-holder textarea {
background: transparent !important;
z-index: 2;
height: auto;
resize: none;
color: #fff;
text-shadow: 0px 0px 0px transparent;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}
.editor-holder textarea::-webkit-input-placeholder {
color: white;
}
.editor-holder textarea:focus {
outline: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.editor-holder code {
z-index: 1;
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
pre code {
background: #1f1f1f !important;
color: #adadad;
}
pre code .hljs {
color: #a9b7c6;
background: #282b2e;
display: block;
overflow-x: auto;
padding: 0.5em;
}
pre code .hljs-number,
pre code .hljs-literal,
pre code .hljs-symbol,
pre code .hljs-bullet {
color: #6897BB;
}
pre code .hljs-keyword,
pre code .hljs-selector-tag,
pre code .hljs-deletion {
color: #cc7832;
}
pre code .hljs-variable,
pre code .hljs-template-variable,
pre code .hljs-link {
color: #629755;
}
pre code .hljs-comment,
pre code .hljs-quote {
color: #808080;
}
pre code .hljs-meta {
color: #bbb529;
}
pre code .hljs-string,
pre code .hljs-attribute,
pre code .hljs-addition {
color: #6A8759;
}
pre code .hljs-section,
pre code .hljs-title,
pre code .hljs-type {
color: #ffc66d;
}
pre code .hljs-name,
pre code .hljs-selector-id,
pre code .hljs-selector-class {
color: #e8bf6a;
}
pre code .hljs-emphasis {
font-style: italic;
}
pre code .hljs-strong {
font-weight: bold;
}
</style></head><body>
<div class="editor-holder">
<ul class="toolbar">
<li><a href="#" id="indent" title="Toggle tabs or spaces"><i class="fa fa-indent"></i></a></li>
<li><a href="#" id="fullscreen" title="Toggle fullscreen mode"><i class="fa fa-expand"></i></a></li>
</ul>
<div class="scroller">
<textarea class="editor allow-tabs"><div class="Editable Textarea">
<h1>This is a fully editable textarea which auto highlights syntax.</h1>
<p>Type or paste any code in here...</p>
<div>
<?php
var simple = "coding";
?>
<script>
with = "Tab or double space functionality";
</script></textarea>
<pre><code class="syntax-highight html"></code></pre>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://use.fontawesome.com/b2c0f76220.js'></script><script src='https://raw.githubusercontent.com/emmetio/textarea/master/emmet.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js'></script>
<script >var tabCharacter = " ";
var tabOffset = 2;
$(document).on('click', '#indent', function(e){
e.preventDefault();
var self = $(this);
self.toggleClass('active');
if(self.hasClass('active'))
{
tabCharacter = "\t";
tabOffset = 1;
}
else
{
tabCharacter = " ";
tabOffset = 2;
}
})
$(document).on('click', '#fullscreen', function(e){
e.preventDefault();
var self = $(this);
self.toggleClass('active');
self.parents('.editor-holder').toggleClass('fullscreen');
});
/*------------------------------------------
Render existing code
------------------------------------------*/
$(document).on('ready', function(){
hightlightSyntax();
emmet.require('textarea').setup({
pretty_break: true,
use_tab: true
});
});
/*------------------------------------------
Capture text updates
------------------------------------------*/
$(document).on('ready load keyup keydown change', '.editor', function(){
correctTextareaHight(this);
hightlightSyntax();
});
/*------------------------------------------
Resize textarea based on content
------------------------------------------*/
function correctTextareaHight(element)
{
var self = $(element),
outerHeight = self.outerHeight(),
innerHeight = self.prop('scrollHeight'),
borderTop = parseFloat(self.css("borderTopWidth")),
borderBottom = parseFloat(self.css("borderBottomWidth")),
combinedScrollHeight = innerHeight + borderTop + borderBottom;
if(outerHeight < combinedScrollHeight )
{
self.height(combinedScrollHeight);
}
}
// function correctTextareaHight(element){
// while($(element).outerHeight() < element.scrollHeight + parseFloat($(element).css("borderTopWidth")) + parseFloat($(element).css("borderBottomWidth"))) {
// $(element).height($(element).height()+1);
// };
// }
/*------------------------------------------
Run syntax hightlighter
------------------------------------------*/
function hightlightSyntax(){
var me = $('.editor');
var content = me.val();
var codeHolder = $('code');
var escaped = escapeHtml(content);
codeHolder.html(escaped);
$('.syntax-highight').each(function(i, block) {
hljs.highlightBlock(block);
});
}
/*------------------------------------------
String html characters
------------------------------------------*/
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
/*------------------------------------------
Enable tabs in textarea
------------------------------------------*/
$(document).delegate('.allow-tabs', 'keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start)
+ tabCharacter
+ $(this).val().substring(end));
// put caret at right position again
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = start + tabOffset;
}
});
//# sourceURL=pen.js
</script>
</body></html>
