Quick question:
How do I change the template background based on CodeMirror: Select Theme? Saya ingin mengubah Theme CodeMirror yang memperbarui warna template pada Blog / Website.
How do I change the template background based on CodeMirror: Select Theme? Saya ingin mengubah Theme CodeMirror yang memperbarui warna template pada Blog / Website.
Answer:
CodeMirror telah membangun dukungan untuk mengubah theme yang tersedia di pustaka inti CodeMirror. Silahkan berkunjung di CodeMirror: Select Theme Demo. Lebih dari 10 pilihan theme untuk dasar theme editor.
CodeMirror telah membangun dukungan untuk mengubah theme yang tersedia di pustaka inti CodeMirror. Silahkan berkunjung di CodeMirror: Select Theme Demo. Lebih dari 10 pilihan theme untuk dasar theme editor.
Kami menggunakan eksperimen kecil seperti contoh di bawah ini. Tip dan trik dengan
option value serta membuat contoh dua warna dasar ini adalah default (Bright) dan warna gelap (Dark). Dan sisanya Sobat bisa bereksperimen lebih lanjut.
• HTML
Copy dan paste HTML di bawah ini dan ikuti comments yang berada di HTML untuk tutorial berikutnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>UjiCode</title>
<!-- CodeMirror: Theme Properties -->
<style>
/* CSS Style */
</style>
</head>
<body id="bodytheme">
<!-- Main Select a theme -->
<textarea id="myTextarea">
<!doctype html>
<html>
<head>
<meta charset='utf-8/'>
<title>UjiCode</title>
<style>p{font-family:monospace}</style>
</head>
<!--Start Body-->
<body>
<p>HTML5 canvas demo. Canvas pane goes here.</p>
<canvas id='pane' width='200' height='180'></canvas>
<script>
var canvas=document.getElementById('pane');
var context=canvas.getContext('2d');
context.fillStyle='#212529';
context.fillRect(20,20,100,100);
context.fillStyle='#343a40';
context.fillRect(50,50,100,100);
context.fillStyle='#495057';
context.fillRect(80,80,100,100);
</script>
<p>Test ...</p>
</body>
<!--And Body-->
</html>
</textarea>
<!-- Add-ons -->
<script>
// script
</script>
</body>
</html>• HTML - CodeMirror: Select Theme
Select Theme adalah mengubah nilai theme untuk memicu acara perubahan. Kami memberi dua contoh warna:
default dan tomorrow-night-eighties dengan pemisah optgroup label.<!-- Main Select a theme -->
<p>
<label>Select a theme: <select id='theme' onchange='selectTheme()'>
<optgroup label='Bright'>
<option value="default">default</option>
</optgroup>
<optgroup label='Dark'>
<option value="tomorrow-night-eighties">tomorrow-night-eighties</option>
</optgroup>
</select>
</label>
</p>• CSS
Rekatkan CSS dibawah ini.
bodytheme adalah tujuan getElementId untuk warna dasar template (Bright - background-color:#FFFFFF) yang akan diubah ke warna lain, dan meyertakan tinggi CodeMirror Editor ini (height:400px)./* CSS Style */
#bodytheme{background-color:#FFFFFF} /* Menetapkan warna dasar di bagian CSS */
.CodeMirror{border:1px solid rgb(60,60,60)}
.CodeMirror{height:400px}
.color-txt{font-family:"open sans","Helvetica Neue",Helvetica,Arial,sans-serif;color:#03A9F4}• CodeMirror and Theme Properties
Warana dasar pilihan utama
dan
codemirror.css (Warna latar belakang default / bright),dan
tomorrow night eighties.css (Warna latar belakang yang ditetapkan adalah dark color).<!-- CodeMirror: CSS Theme Properties --> <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"/> <link rel="stylesheet" href="https://codemirror.net/theme/tomorrow-night-eighties.css"/>
• CodeMirror Syntax Highlighting Properties
CodeMirror Syntax Highlighting membantu warna dan opsional indentasi teks; css, javascript, xml dan html.
<!-- Add-ons --> <script src="https://codemirror.net/lib/codemirror.js"></script> <script src="https://codemirror.net/mode/css/css.js"></script> <script src="https://codemirror.net/mode/javascript/javascript.js"></script> <script src="https://codemirror.net/mode/xml/xml.js"></script> <script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
• JavaScript - editor
Tambahkan JavaScript untuk menjalankan fungsi elemen textarea dan fungsi CodeMirror melalui
document.getElementById.// JavaScript
var editor = CodeMirror.fromTextArea(document.getElementById("myTextarea"), {
mode: "text/html",
lineNumbers: true
});• JavaScript - Input
Tambahkan visual select theme untuk memformat teks yang dipilih dan bekerja secara otomatis.
// Theme Selection on click
var selTheme=document.getElementById("theme");selTheme.addEventListener("input",selectTheme);function selectTheme(){var theme=selTheme.options[selTheme.selectedIndex].textContent;editor.setOption("theme",theme);}
setTimeout(function(){selectTheme();updatePreview();},300);• JavaScript - Switch
Mengubah background template berdasarkan CodeMirror: Select Theme. Select Theme memperbarui warna template pada Blog / Website.
// Body Theme on click
window.onload=function(){main();var count=0;};
function main(){setHeaderColor();
document.getElementById("theme").onchange=function(){
var color=setHeaderColor(document.getElementById("theme").value);
if(color==="#FFFFFF"){
document.getElementById("bodytheme").style.backgroundColor=color;
document.getElementById("bodytheme").style.color="#1D1D1B";
}else{
document.getElementById("bodytheme").style.backgroundColor="#000000";
document.getElementById("bodytheme").style.color="#FFFFFF";
}};}
function setHeaderColor(str){var colorCode="";switch(str){
case "material":colorCode="#141415";break;
case "tomorrow-night-eighties":colorCode="#393939";;break;
default :colorCode="#FFFFFF";}
return colorCode;}Note:
Gunakan banyak
Gunakan banyak
document.getElementById untuk warna target di template Blog, misalnya: warna sidebar, menu dan lain-lain, untuk menyesuaikan warna editor.CodeMirror meyediakan banyak theme untuk file CSS yang menentukan warna untuk berbagai sintaksis. Banyak koleksi yang Sobat dapatkan di theme CodeMirror untuk kesenangan coding, programming dan scripting. Sobat dapat menambahkan lokalstorage ke live editor ataupun code editor untuk penyimpanan sementara ketika pengguna mengatur thema dan memuat ulang browser; bahwa warna pilihannya akan tetap aktif di browser. Semoga membatu tentang How do I change the template background based on CodeMirror: Select Theme? Enjoy make coding Now.
0 Comments
Post a Comment