Syntex highlighting technique is used to make code editor looks nice. We will build it today.
What's happening guys today we are going to make Textarea Tabs Syntax Highlighting. As you know the HTML markup is vital for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.
Save It As index.html :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Textarea Tabs + Syntax Highlighting</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css">
<link rel="stylesheet" href="css/style.css">
</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>
<select>
<option>HTML</option>
<option>CSS</option>
<option>Javascript</option>
<option>PHP</option>
</select>
</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="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="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script
src="js/index.js"></script>
</body>
</html>
Without CSS our this script (Textarea Tabs Syntax Highlighting) will never look divine. So here we are, our HTML markup is ready now we have to customize our HTML and it can be done using CSS.
So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.
Save It As style.css :
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;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);
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 select{
width:10%;
float:right;
margin-bottom:-6px;
padding: 8px;
font-size: 10px;
color: #fff;
background: rgba(144, 144, 144, 0.6);
height:;
}
.editor-holder .toolbar a {
line-height: 20px;
background: rgba(144, 144, 144, 0.6);
color: grey;
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);
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;
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 rgba(0, 0, 0, 0);
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;
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;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #272822;
color: #ddd
}
.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-strong,
.hljs-name {
color: #f92672
}
.hljs-code {
color: #66d9ef
}
.hljs-class .hljs-title {
color: white
}
.hljs-attribute,
.hljs-symbol,
.hljs-regexp,
.hljs-link {
color: #bf79db
}
.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: #a6e22e
}
.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
color: #75715e
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-selector-id {
font-weight: bold
}
So we have written HTML markup and customised it and now we will add some functionality in this project (Textarea Tabs Syntax Highlighting).
To make this project (Textarea Tabs Syntax Highlighting) work properly for that we will use JavaScript.
So here is a JavaScript for our project (Textarea Tabs Syntax Highlighting) and also save it with the filename as provided. Make a new folder called js and put this file to that folder
.Save It As index.js :
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, "'");
}
/*------------------------------------------
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;
}
});Completion :
So here we are, We have done and our project Textarea Tabs Syntax Highlighting is ready now you can save all the files as provided.
Like CSS files in css folder and JavaScript files in a JS folder name. Below is folder tree of the files and folders of this project.
- Textarea Tabs Syntax Highlighting
- css
- style.css
- js
- index.js
- index.html
- css
Download Project (Textarea Tabs Syntax Highlighting) File :
Textarea Tabs Syntax Highlighting.zip
File Size 5.63 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.
So our today's project is completed I have also provided that download files above you can download them from the above link that's free do it now and also subscribe to the newsletters and join our mailing list.
Thank you !
