Micro Code Editor With Textarea Syntax Highlighter Javascript
close
Micro Code Editor With Textarea Syntax Highlighter Javascript

Micro Code Editor With Textarea Syntax Highlighter Javascript

Micro Code Editor With Textarea Syntax Highlighter Javascript

Are you a web developer or designer have you ever used Notepad plus plus or any online ID for web developers if you have had then you will also know that what is syntax highlighting.

Syntax highlighting is basically a technique in which a code is highlighted in its specified syntax today every website use Syntax highlighting jQuery plugins basically known as highlight.min.js and prism.min.js . so in this project we are going to build a syntax highlighter that can highlight the code on the go like you can edit it live.


Hey developers today we are going to build Micro Code Editor With Textarea Syntax Highlighter Javascript. As you know the HTML markup is necessary 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>Micro Code Editor in the Browser!</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="view">
<h1 class="title">
Micro Code Editor
<small>With syntax highlight*</small>
</h1>
<div class="window">
<div class="window-header">
<div class="action-buttons"></div>
<select class="language">
<option value="javascript" selected>JavaScript</option>
<option value="markup">HTML</option>
<option value="php">PHP</option>
</select>
</div>
<div class="window-body">
<textarea class="code-input">// Switch the language and put some code on me :)
↑↑↑↑↑↑
// This is a "Hello World" example.
function greetings(name){
name = name || "stranger";
return "Hello, " + name + "!";
}
window.onLoad = alert(greetings());</textarea>
<pre class="code-output">
<code class="language-javascript">
</code>
</pre>
</div>
</div>
<div class="credits">
*thanks to <a href="https://twitter.com/leaverou">Lea Verou</a> for <a href="http://prismjs.com/">Prism.js</a>
</div>
</main>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<script
src="js/index.js"></script>
</body>
</html>


So our HTML markup is ready now we have to write CSS code for this project you can customise it as you want and as you like but for that you should have knowledge about CSS usually called as cascading style sheets.

so here we have created two elements one is a text area and other is a DIV whenever we change the value inside a textarea the textarea value will be given to that DIV and you will see highlighted syntax of that code.


Without CSS our this script (Micro Code Editor With Textarea Syntax Highlighter Javascript) will never look classy. So here we are, our HTML markup is ready now we have to personalize 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 :

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  src: local("Lato Light"), local("Lato-Light"), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwiPHA.ttf) format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: local("Lato Regular"), local("Lato-Regular"), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wWw.ttf) format("truetype");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: local("Lato Bold"), local("Lato-Bold"), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh6UVSwiPHA.ttf) format("truetype");
}
@font-face {
  font-family: "PT Mono";
  font-style: normal;
  font-weight: 400;
  src: local("PT Mono"), local("PTMono-Regular"), url(https://fonts.gstatic.com/s/ptmono/v6/9oRONYoBnWILk-9AnC8zNg.ttf) format("truetype");
}
body {
  background: LightCoral;
  font-family: Lato, sans-serif;
  font-size: 15px;
  margin: 0;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
*:focus {
  outline: none;
}
a {
  text-decoration: none;
  color: inherit;
}
main {
  min-height: 100vh;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.title {
  color: #fff;
  text-align: center;
  font-weight: 300;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  font-size: 2.8em;
  margin-top: 1.5em;
}
.title small {
  display: block;
  font-size: 0.6em;
  margin-top: 0.4em;
}
.credits {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  margin-top: 2em;
  font-size: 0.8em;
  opacity: 0.5;
}
.window {
  width: 547px;
  background: GhostWhite;
  border-radius: 0.3rem;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.window .window-header {
  height: 37px;
  background: Gainsboro;
  position: relative;
}
.window .window-header .action-buttons {
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  background: Crimson;
  border-radius: 50%;
  box-shadow: 15px 0 0 Orange,
				30px 0 0 LimeGreen;
}
.window .window-header .language {
  display: inline-block;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -10px;
  height: 21px;
  padding: 0 1em;
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  font-family: Lato, sans-serif;
  color: DimGrey;
}
.window .window-header .language:before {
  content: "asd";
}
.window .window-header .language:hover {
  background: rgba(0, 0, 0, 0.1);
}
.window .window-body {
  position: relative;
  height: 300px;
}
.window .window-body .code-input,
.window .window-body .code-output {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  border: none;
  font-family: "PT Mono", monospace;
  font-size: 0.8rem;
  background: transparent;
  white-space: pre-wrap;
  line-height: 1.5em;
  word-wrap: break-word;
}
.window .window-body .code-input {
  opacity: 0.7;
  margin: 0;
  color: #999;
  resize: none;
}
.window .window-body .code-output {
  pointer-events: none;
  z-index: 3;
  margin: 0;
  overflow-y: auto;
}
.window .window-body .code-output code {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 1rem;
  display: block;
  color: #666;
  font-size: 0.8rem;
  font-family: "PT Mono", monospace;
}
a.token {
  text-decoration: none;
}
.token.selector,
.token.punctuation,
.token.keyword {
  color: PaleVioletRed;
}
.token.property,
.token.number,
.token.string,
.token.punctuation,
.token.tag-id {
  color: DodgerBlue;
}
.token.function,
.token.attr-name {
  color: CadetBlue;
}
.token.atrule .atrule-id {
  color: BlueViolet;
}
.token.boolean {
  color: LightSlateGray;
}
.token.comment {
  color: DarkGrey;
}
.language-php .variable {
  color: CadetBlue;
}


So the position of the DIV element will be absolute so that we can justify it at above the textarea element.


So we have written HTML markup and customised it and now we will add some functionality in this project (Micro Code Editor With Textarea Syntax Highlighter Javascript).



To make this project (Micro Code Editor With Textarea Syntax Highlighter Javascript) work properly for that we will use JavaScript.



So here is a JavaScript for our project (Micro Code Editor With Textarea Syntax Highlighter Javascript) 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 MicroCode = (function(){
	return {
		init: function(inputSel, outputSel, languageSel){
			this.focusInput(inputSel);
			this.listenForInput(inputSel);
			this.listenForLanguage(languageSel, '.code-output', inputSel);
			this.renderOutput(outputSel, $(inputSel)[0].value);
			this.listenerForScroll(inputSel, outputSel);
		},
		
		listenForInput: function(inputSel){
			var self = this;

			$(inputSel).on('input keydown', function(key){
				var input = this,
					selStartPos = input.selectionStart,
					inputVal = input.value;

				if(key.keyCode === 9){
					input.value = inputVal.substring(0, selStartPos) + "    " + inputVal.substring(selStartPos, input.value.length);
					input.selectionStart = selStartPos + 4;
					input.selectionEnd = selStartPos + 4;
					key.preventDefault();
				}

				self.renderOutput('.code-output', this.value);
			});

			Prism.highlightAll();
		},
		
		listenForLanguage: function(languageSel, outputSel, inputSel){
			var self = this;
			$(languageSel).on('change', function(){
				$('code', outputSel)
					.removeClass()
					.addClass('language-' + this.value)
					.removeAttr('data-language');
				
				$(outputSel)
					.removeClass()
					.addClass('code-output language-' + this.value);
				
				$(inputSel)
					.val('');
				
				$('code', outputSel)
					.html('');
				
				self.focusInput(inputSel);
			});
		},
		
		listenerForScroll: function(inputSel, outputSel){
			$(inputSel).on('scroll', function(){
				console.log(this.scrollTop);
				$(outputSel)[0].scrollTop = this.scrollTop;
			});
		},
		
		renderOutput: function(outputSel, value){
			$('code', outputSel)
				.html(value.replace(/&/g, "&").replace(//g, ">") + "
");
			
			Prism.highlightAll();
		},
		
		focusInput: function(inputSel){
			var input = $(inputSel);
			
			input.focus();
			
			input[0].selectionStart = input[0].value.length;
			input[0].selectionEnd = input[0].value.length;
		}
	}
})();

MicroCode.init('.code-input', '.code-output', '.language');

In our JavaScript code we will use regular expressions to find and highlight the specified characters, symbols, values etc.

So if you don't know about regular expressions subscribe to the newsletters of this blog I will try to make a post about it to make a video about it so that you will be familiar with regex and you can make them as your own.




Ending :

So here we are, We have done and our project Micro Code Editor With Textarea Syntax Highlighter Javascript 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.



  • Micro Code Editor With Textarea Syntax Highlighter Javascript
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Micro Code Editor With Textarea Syntax Highlighter Javascript) File :

Micro Code Editor With Textarea Syntax Highlighter Javascript.zip
File Size 5.12 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.


Nothing to say anymore that's it our post has been completed and if you like my post share it with your friends and keep visiting this site for more this kind of tutorials you can also visit my YouTube channel and subscribe to it simply go to Softweb Tuts and subscribe it.



Thank you !


Disqus Codes

No comments

Notifications

Disqus Logo