CodePen Embed - Amazing Html Editor with Color detect

<!-- Coding Tools
- Theodorakis Ioannis: Mc Engineer
- Code Blog https://superblogger3.blogspot.com
- Newspsper https://yourss365.blogspot.com 
- Webdesign https://istogrami365.blogspot.com 
- Templates https://webtemplate365.blogspot.com
-->
<center><a href="https://codepen.io/johngreek"><img width="50%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglP0wkjevU2lAqHYRUSmnXbpxaEYPRzECLqCLuqlVhcnscqOkQfcUPB4zlO7dGNopgZJmvhq2bBYYZtjIghlPhSa_sXBJxHtAQnfiKiyB4joSaDJ1cEDeJgJeqEQQciO30iV-tADAXtQnpN85uG67i52CGr6fsdxq3Kzlw3sTCbF6cwKoaxOO45xJ0ROw/s16000/istogrami900.png"></a></center>

<script type="text/javascript" src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>

<script type="text/javascript" src="https://ajaxorg.github.io/ace-builds/src/ext-modelist.js"></script>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ace-colorpicker@0.0.12/addon/ace-colorpicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ace-colorpicker@0.0.12/addon/ace-colorpicker.min.js" ></script>        
  <style type="text/css">
    .ace-area {
        
        height: 800px;
        margin: 0 auto;
        position: relative;
    }

    #sample_text_area {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

</style>
📂
<input type="file" id="code-input" class="d-none" onchange="openFile(this)">
 &nbsp;<button onclick="toggleFullScreen()" title="Toggle FullScreen" style="background-color: white ; color:black;font-weight: bold;">⏹ FullScreen</button>
   &nbsp;

<button onclick='saveFile()' style="background-color:white;color:black;font-weight: bold;"> 💾Save.. </button>
   &nbsp;&nbsp;📑
<select id="modeSelect" onchange="window.location.hash=this.value; setModeFromHash();">
            <option>javascript</option>
            <option>html</option>
            <option>css</option>
            <option>xml</option>
            <option>php</option> 
            <option>java</option> 
            <option>json</option>
            <option>mysql</option>
            <option>python</option>
            <option>scss</option>
            <option>vbscript</option>
            <option>batchfile</option>
            <option>c_cpp</option>
            <option>sql</option>
            <option>pgsql</option>
            <option>html_ruby</option>
            <option>svg</option>
            <option>pascal</option>
            <option>sh</option>
            <option>ini</option>
            <option>asciidoc</option>
            <option>assembly_x86</option>
            <option>text</option>
  
        </select>
&nbsp;
<label>🎫
<select id="ace-theme" size="1">
  <optgroup label="bright">
    <option value="chrome">chrome</option>
    <option value="clouds">clouds</option>
    <option value="crimson_editor">crimson_editor</option>
    <option value="dawn">dawn</option>
    <option value="dreamweaver">dreamweaver</option>
    <option value="eclipse">eclipse</option>
    <option value="github">github</option>
    <option value="solarized_light">solarized_light</option>
    <option value="textmate">textmate</option>
    <option value="tomorrow" selected>tomorrow</option>
    <option value="xcode">xcode</option>
  </optgroup>
  <optgroup label="dark">
    <option value="clouds_midnight">clouds_midnight</option>
    <option value="cobalt">cobalt</option>
    <option value="idle_fingers">idle_fingers</option>
    <option value="kr_theme">kr_theme</option>
    <option value="merbivore">merbivore</option>
    <option value="merbivore_soft">merbivore_soft</option>
    <option value="mono_industrial">mono_industrial</option>
    <option value="monokai">monokai</option>
    <option value="pastel_on_dark">pastel_on_dark</option>
    <option value="solarized_dark">solarized_dark</option>
    <option value="terminal">terminal</option>
    <option value="tomorrow_night">tomorrow_night</option>
    <option value="tomorrow_night_blue">tomorrow_night_blue</option>
    <option value="tomorrow_night_bright">tomorrow_night_bright</option>
    <option value="tomorrow_night_eighties">tomorrow_night_eighties</option>
    <option value="twilight">twilight</option>
    <option value="vibrant_ink">vibrant_ink</option>
  </optgroup>
</select>
</label> 
&nbsp;
<label>⇅
<select id="Font-size" size="1">
   <option value="10px">10px</option>
   <option value="11px">11px</option>
   <option value="12px">12px</option>
   <option value="13px">13px</option>
   <option value="14px">14px</option>
   <option value="15px">15px</option>
   <option value="16px">16px</option>
   <option value="17px">17px</option>
   <option value="18px">18px</option>
   <option value="18px">20px</option>
   <option value="18px">22px</option>
</select>
</label>  

&nbsp;
<a href="#" onclick="editor.execCommand('find'); return false;">  🔎Find </a>
&nbsp;
<a href="#" onclick="editor.execCommand('undo'); return false;"> 🔄Undo </a>

<section class="main">

    <div class="ace-area">
        
<div id="sample_text_area">
.sample-green .red {
    background-color: green; 
    color: blue;
}
.test {
  color: yellow;
  color: brown;
  color: white;
  color: orange;
  color: gray;
  color: black;
  color: purple;
  color: Magenta;
  color: Olive;
  color: Cyan;
  color: Navy;
  color: Turquoise;
  color: YellowGreen;
  color: Indigo;
  color: Lime;
  color: Plum;
  color: Fuchsia;
  color: Khaki;
  color: Gold;
  color: Tomato;
  color: Coral;
  color: LightPink;
  color: Crimson;
  color: DarkRed;
 }
  
.background-color: red;
{  Newspaper: https://yourss365.blogspot.com }
*// Tip: Mouse over to Colr Pickup do NOT Click //*  
</div>
    
<pre><code class="javascript">// AceEditor Addon 
var cm = AceEditor.fromTextArea(document.getElementById("sample_text_area"), {
    colorpicker : {
        mode : 'edit'
    }
});</code></pre>
</div>

</section>

/* all styles
var modes = [
    'abap',
    'actionscript',
    'ada',
    'apache_conf',
    'asciidoc',
    'assembly_x86',
    'autohotkey',
    'batchfile',
    'c9search',
    'c_cpp',
    'cirru',
    'clojure',
    'cobol',
    'coffee',
    'coldfusion',
    'csharp',
    'css',
    'curly',
    'd',
    'dart',
    'diff',
    'dockerfile',
    'dot',
    'dummy',
    'dummysyntax',
    'eiffel',
    'ejs',
    'elixir',
    'elm',
    'erlang',
    'forth',
    'ftl',
    'gcode',
    'gherkin',
    'gitignore',
    'glsl',
    'golang',
    'groovy',
    'haml',
    'handlebars',
    'haskell',
    'haxe',
    'html',
    'html_ruby',
    'ini',
    'io',
    'jack',
    'jade',
    'java',
    'javascript',
    'json',
    'jsoniq',
    'jsp',
    'jsx',
    'julia',
    'latex',
    'less',
    'liquid',
    'lisp',
    'livescript',
    'logiql',
    'lsl',
    'lua',
    'luapage',
    'lucene',
    'makefile',
    'markdown',
    'matlab',
    'mel',
    'mushcode',
    'mysql',
    'nix',
    'objectivec',
    'ocaml',
    'pascal',
    'perl',
    'pgsql',
    'php',
    'powershell',
    'praat',
    'prolog',
    'properties',
    'protobuf',
    'python',
    'r',
    'rdoc',
    'rhtml',
    'ruby',
    'rust',
    'sass',
    'scad',
    'scala',
    'scheme',
    'scss',
    'sh',
    'sjs',
    'smarty',
    'snippets',
    'soy_template',
    'space',
    'sql',
    'stylus',
    'svg',
    'tcl',
    'tex',
    'text',
    'textile',
    'toml',
    'twig',
    'typescript',
    'vala',
    'vbscript',
    'velocity',
    'verilog',
    'vhdl',
    'xml',
    'xquery',
    'yaml',
 */

var EditSession = require("ace/edit_session").EditSession;
var theme='ace/theme/tomorrow';
var mode='ace/mode/scss';

var editor = ace.edit("sample_text_area");
editor.setTheme("ace/theme/solarized_light");    
editor.session.setMode("ace/mode/css", () => {
  AceColorPicker.load(ace, editor); 
  
})

// setmode //
        function setModeFromHash() {
            var available = [];
            var modeSelect = document.getElementById('modeSelect');
            for (var i = 0; i < modeSelect.options.length; i++) {
                available.push(modeSelect.options[i].text);
            }
            var mode = window.location.hash.replace('#', '');
            if (!mode || available.indexOf(mode) === -1) {
                window.location.hash = modeSelect.value;
                setModeFromHash();
                return;
            }
        
            if (modeSelect.value != mode)
                modeSelect.options[available.indexOf(mode)].selected = true;
        
            editor.session.setMode("ace/mode/" + mode);
            GetFile(mode == 'javascript' ? 'DemoJavascript.js' : 'demo.html', function (f) {
                editor.setValue(f);
        
            });
        }


// 파일 업로드 시
function openFile(e) {
    const reader = new FileReader();
    reader.onload = function(event) { editor.setValue(event.target.result, 1); }   
    reader.readAsText(e.files[0]);
};

// 코드 저장 시
function saveFile() {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(editor.getValue()));
    element.setAttribute('download', `${getDateTimeAsString()}.py`);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

function getDateTimeAsString() {
    const now = new Date();
    const year = now.getFullYear();
    const month = (now.getMonth() + 1).toString().padStart(2, "0");
    const day = now.getDate().toString().padStart(2, "0");
    const hours = now.getHours().toString().padStart(2, "0");
    const minutes = now.getMinutes().toString().padStart(2, "0");
    const seconds = now.getSeconds().toString().padStart(2, "0");
    const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    return formattedTime;
}


function toggleFullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
}



$('#ace-theme').on('change',function(){
  editor.setTheme('ace/theme/' +$(this).val().toLowerCase());
});

$('#Font-size').on('change',function(){
      editor.setFontSize($(this).val());
   });

This Pen is owned by Theodorakis Ioannis on CodePen.

See more by @johngreek on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js