├── CONTRIBUTING.md ├── README.md ├── favicon.png ├── index.html ├── script.js └── style.css /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributiors who wants to make this website better can make contribution,which will be **greatly appreciated**. 4 | 5 | 1. Fork the Project 6 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 7 | 3. Commit your Changes (`git commit -m 'Added some AmazingFeature'`) 8 | 4. Push to the Branch (`git push origin feature/AmazingFeature`) 9 | 5. Open a Pull Request 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # micro-code-editor 2 | - Micro Code editor is A Syntax highlighter that can run `online or offline.` 3 | - This code editor can highlight the syntax of `JavaScript, HTML5 and PHP.` 4 |

5 | 6 |

7 | 8 | --- 9 | ### 🔗 Link: https://rededge967.github.io/micro-code-editor 10 | --- 11 | ## Preview 12 | ![Capture60](https://user-images.githubusercontent.com/91379432/147645646-e60b70b4-86af-498f-b141-ffa5ccd6ce8e.PNG) 13 | --- 14 | ## Running `Micro Code Editor` 15 | ### Running `online` 16 | - Open up your browser 17 | - Go to https://rededge967.github.io/micro-code-editor 18 | ### Running `offline` 19 | - Go to the [releases](https://github.com/RedEdge967/micro-code-editor/releases) and download it 20 | - Extract the folder 21 | - Run `index.html` file in your browser 22 | --- 23 | ## Can I [contribute?](https://github.com/RedEdge967/micro-code-editor/blob/master/CONTRIBUTING.md) 24 | - Sure, open an issue, point out errors, and what not. Wanna fix something yourselves, you're welcome to open a pull request and I appreciate it. 25 | --- 26 | ### Browser Support 27 | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png) 28 | --- | --- | --- | --- | --- | 29 | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 30 | --- 31 | ## Cloning 32 | ### Cloning with HTTPS 33 | ``` 34 | https://github.com/RedEdge967/micro-code-editor.git 35 | ``` 36 | ### Cloning with SSH 37 | ``` 38 | git@github.com:RedEdge967/micro-code-editor.git 39 | ``` 40 | ### Cloning with Github CLI 41 | ``` 42 | gh repo clone RedEdge967/micro-code-editor 43 | ``` 44 | --- 45 | > ### If you found this FOSS as a useful software, don't forget to give a star and fork to make a upgraded version of Micro code editor with adding your own features. 46 | -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RedEdge967/micro-code-editor/0e22b36f61e1b12f7da732a9afabd61abb002a75/favicon.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Micro Code Editor in the Browser! 6 | 7 | 9 | 10 | 11 | 12 | 13 |
14 |

15 | Micro Code Editor 16 | With syntax highlight* 17 |

18 | 19 |
20 |
21 |
22 | 27 |
28 |
29 | 38 | 
39 | 				
40 | 					
41 | 				
42 |
43 |
44 |
45 |
46 | *Made By Chandula Janith With Codepen 47 |
48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | ;var MicroCode = (function(){ 2 | return { 3 | init: function(inputSel, outputSel, languageSel){ 4 | this.focusInput(inputSel); 5 | this.listenForInput(inputSel); 6 | this.listenForLanguage(languageSel, '.code-output', inputSel); 7 | this.renderOutput(outputSel, $(inputSel)[0].value); 8 | this.listenerForScroll(inputSel, outputSel); 9 | }, 10 | 11 | listenForInput: function(inputSel){ 12 | var self = this; 13 | 14 | $(inputSel).on('input keydown', function(key){ 15 | var input = this, 16 | selStartPos = input.selectionStart, 17 | inputVal = input.value; 18 | 19 | if(key.keyCode === 9){ 20 | input.value = inputVal.substring(0, selStartPos) + " " + inputVal.substring(selStartPos, input.value.length); 21 | input.selectionStart = selStartPos + 4; 22 | input.selectionEnd = selStartPos + 4; 23 | key.preventDefault(); 24 | } 25 | 26 | self.renderOutput('.code-output', this.value); 27 | }); 28 | 29 | Prism.highlightAll(); 30 | }, 31 | 32 | listenForLanguage: function(languageSel, outputSel, inputSel){ 33 | var self = this; 34 | $(languageSel).on('change', function(){ 35 | $('code', outputSel) 36 | .removeClass() 37 | .addClass('language-' + this.value) 38 | .removeAttr('data-language'); 39 | 40 | $(outputSel) 41 | .removeClass() 42 | .addClass('code-output language-' + this.value); 43 | 44 | $(inputSel) 45 | .val(''); 46 | 47 | $('code', outputSel) 48 | .html(''); 49 | 50 | self.focusInput(inputSel); 51 | }); 52 | }, 53 | 54 | listenerForScroll: function(inputSel, outputSel){ 55 | $(inputSel).on('scroll', function(){ 56 | console.log(this.scrollTop); 57 | $(outputSel)[0].scrollTop = this.scrollTop; 58 | }); 59 | }, 60 | 61 | renderOutput: function(outputSel, value){ 62 | $('code', outputSel) 63 | .html(value.replace(/&/g, "&").replace(//g, ">") + "\n"); 65 | 66 | Prism.highlightAll(); 67 | }, 68 | 69 | focusInput: function(inputSel){ 70 | var input = $(inputSel); 71 | 72 | input.focus(); 73 | 74 | input[0].selectionStart = input[0].value.length; 75 | input[0].selectionEnd = input[0].value.length; 76 | } 77 | } 78 | })(); 79 | 80 | MicroCode.init('.code-input', '.code-output', '.language'); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Lato'; 3 | font-style: normal; 4 | font-weight: 300; 5 | src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh7USSwiPHA.ttf) format('truetype'); 6 | } 7 | @font-face { 8 | font-family: 'Lato'; 9 | font-style: normal; 10 | font-weight: 400; 11 | src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjx4wWw.ttf) format('truetype'); 12 | } 13 | @font-face { 14 | font-family: 'Lato'; 15 | font-style: normal; 16 | font-weight: 700; 17 | src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh6UVSwiPHA.ttf) format('truetype'); 18 | } 19 | @font-face { 20 | font-family: 'PT Mono'; 21 | font-style: normal; 22 | font-weight: 400; 23 | src: url(https://fonts.gstatic.com/s/ptmono/v8/9oRONYoBnWILk-9AnC8zNg.ttf) format('truetype'); 24 | } 25 | body { 26 | background: LightCoral; 27 | font-family: Lato, sans-serif; 28 | font-size: 15px; 29 | margin: 0; 30 | } 31 | *, 32 | *:before, 33 | *:after { 34 | box-sizing: border-box; 35 | } 36 | *:focus { 37 | outline: none; 38 | } 39 | a { 40 | text-decoration: none; 41 | color: inherit; 42 | } 43 | main { 44 | min-height: 100vh; 45 | display: flex; 46 | display: -webkit-flex; 47 | -webkit-align-items: center; 48 | align-items: center; 49 | -webkit-flex-direction: column; 50 | flex-direction: column; 51 | } 52 | .title { 53 | color: #fff; 54 | text-align: center; 55 | font-weight: 300; 56 | text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 57 | font-size: 2.8em; 58 | margin-top: 1.5em; 59 | } 60 | .title small { 61 | display: block; 62 | font-size: 0.6em; 63 | margin-top: 0.4em; 64 | } 65 | .credits { 66 | color: #fff; 67 | text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 68 | margin-top: 2em; 69 | font-size: 0.8em; 70 | opacity: 0.5; 71 | } 72 | .window { 73 | width: 547px; 74 | background: GhostWhite; 75 | border-radius: 0.3rem; 76 | box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); 77 | overflow: hidden; 78 | } 79 | .window .window-header { 80 | height: 37px; 81 | background: Gainsboro; 82 | position: relative; 83 | } 84 | .window .window-header .action-buttons { 85 | position: absolute; 86 | top: 50%; 87 | left: 10px; 88 | margin-top: -5px; 89 | width: 10px; 90 | height: 10px; 91 | background: Crimson; 92 | border-radius: 50%; 93 | box-shadow: 15px 0 0 Orange, 94 | 30px 0 0 LimeGreen; 95 | } 96 | .window .window-header .language { 97 | display: inline-block; 98 | position: absolute; 99 | right: 10px; 100 | top: 50%; 101 | margin-top: -10px; 102 | height: 21px; 103 | padding: 0 1em; 104 | text-align: right; 105 | -webkit-appearance: none; 106 | appearance: none; 107 | border: none; 108 | background: transparent; 109 | font-family: Lato, sans-serif; 110 | color: DimGrey; 111 | } 112 | .window .window-header .language:before { 113 | content: 'asd'; 114 | } 115 | .window .window-header .language:hover { 116 | background: rgba(0, 0, 0, 0.1); 117 | } 118 | .window .window-body { 119 | position: relative; 120 | height: 300px; 121 | } 122 | .window .window-body .code-input, 123 | .window .window-body .code-output { 124 | position: absolute; 125 | top: 0; 126 | left: 0; 127 | width: 100%; 128 | height: 100%; 129 | padding: 1rem; 130 | border: none; 131 | font-family: 'PT Mono', monospace; 132 | font-size: 0.8rem; 133 | background: transparent; 134 | white-space: pre-wrap; 135 | line-height: 1.5em; 136 | word-wrap: break-word; 137 | } 138 | .window .window-body .code-input { 139 | opacity: 0.7; 140 | margin: 0; 141 | color: #999; 142 | resize: none; 143 | } 144 | .window .window-body .code-output { 145 | pointer-events: none; 146 | z-index: 3; 147 | margin: 0; 148 | overflow-y: auto; 149 | } 150 | .window .window-body .code-output code { 151 | position: absolute; 152 | top: 0; 153 | left: 0; 154 | margin: 0; 155 | padding: 1rem; 156 | display: block; 157 | color: #666; 158 | font-size: 0.8rem; 159 | font-family: 'PT Mono', monospace; 160 | } 161 | a.token { 162 | text-decoration: none; 163 | } 164 | .token.selector, 165 | .token.punctuation, 166 | .token.keyword { 167 | color: PaleVioletRed; 168 | } 169 | .token.property, 170 | .token.number, 171 | .token.string, 172 | .token.punctuation, 173 | .token.tag-id { 174 | color: DodgerBlue; 175 | } 176 | .token.function, 177 | .token.attr-name { 178 | color: CadetBlue; 179 | } 180 | .token.atrule .atrule-id { 181 | color: BlueViolet; 182 | } 183 | .token.boolean { 184 | color: LightSlateGray; 185 | } 186 | .token.comment { 187 | color: DarkGrey; 188 | } 189 | .language-php .variable { 190 | color: CadetBlue; 191 | } --------------------------------------------------------------------------------