Syntax Highlighting adalah mode fitur editor teks yang digunakan untuk pemrograman, scripting, atau bahasa markup, seperti: HTML CSS JavaScript PHP Markdown dan editor lainnya. Fitur ini menampilkan teks, terutama kode sumber dalam berbagai warna dan font sesuai dengan kategori istilah dan Objek Khusus atau dengan Nama Kelas.
Dibawah ini merupakan salah satu pemrograman CodeMirror menyoroti syntax dan jenis coding dimasing-masing pemrograman dan mengungah di Blogger post ini. Syntax Highlighting ini dapat dimasukkan ke dalam pembungkus objek
highlight dan className properti. Ini memungkinkan untuk dapat mengatur kelas CSS di markup highlight untuk gaya kustom yang tersedia di perpustakaan tema inti Codemirror, seperti mengubah warna highlight dan add-on lainnya.CodeMirror Syntax Highlighting Taging pre
CodeMirror bekerja dan menyoroti Syntax text serta kode dalam
pre dan nama class dan bekerja dengan beberapa properti, seperti: pemrograman, scripting, atau bahasa markup. Post Blogger masih dapat menjalankan beberapa addons cm-properti di taging pre.• HTML Highlight Syntax
<!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<title>HTML5 canvas demo</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>• CSS Highlight Syntax
/*
Name : one-dark 1.1.1
Author : Török Ádám (http://github.com/Aerobird98)
Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax)
*/
/* basic */
.cm-s-one-dark {
font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
font-weight: 350;
font-size: 18px;
color: #abb2bf;
background-color: #282c34;
}
.cm-s-one-dark .CodeMirror-selected {background-color: #3e4451;}
.cm-s-one-dark .CodeMirror-gutter,
.cm-s-one-dark .CodeMirror-gutters {
border: none;
background-color: #282c34;
}
.cm-s-one-dark .CodeMirror-linenumber,
.cm-s-one-dark .CodeMirror-linenumbers {
color: #5c6370 !important;
background-color: transparent;
}
.cm-s-one-dark .CodeMirror-lines {
color: #abb2bf !important;
background-color: transparent;
}
.cm-s-one-dark .CodeMirror-cursor {border-left: 2px solid #56b6c2 !important;}
/* addon: edit/machingbrackets.js and addon: edit/matchtags.js */
.cm-s-one-dark .CodeMirror-matchingbracket,
.cm-s-one-dark .CodeMirror-matchingtag {
border-bottom: 2px solid #56b6c2;
color: #abb2bf !important;
background-color: transparent;
}
.cm-s-one-dark .CodeMirror-nonmatchingbracket {
border-bottom: 2px solid #e06c75;
color: #abb2bf !important;
background-color: transparent;
}
/* addon: fold/foldgutter.js */
.cm-s-one-dark .CodeMirror-foldmarker,
.cm-s-one-dark .CodeMirror-foldgutter,
.cm-s-one-dark .CodeMirror-foldgutter-open,
.cm-s-one-dark .CodeMirror-foldgutter-folded {
border: none;
text-shadow: none;
color: #5c6370 !important;
background-color: transparent;
}
/* addon: selection/active-line.js */
.cm-s-one-dark .CodeMirror-activeline-background {background-color: rgba(153, 187, 255, 0.04);}
/* basic syntax */
.cm-s-one-dark .cm-header {color: #e06c75;}
.cm-s-one-dark .cm-quote {color: #5c6370;font-style: italic;}
.cm-s-one-dark .cm-negative {color: #e06c75;}
.cm-s-one-dark .cm-positive {color: #e06c75;}
.cm-s-one-dark .cm-strong {color: #d19a66;font-weight: bold;}
.cm-s-one-dark .cm-header .cm-strong {color: #d19a66;font-weight: bold;}
.cm-s-one-dark .cm-em {color: #c678dd;font-style: italic;}
.cm-s-one-dark .cm-header .cm-em {color: #c678dd;font-style: italic;}
.cm-s-one-dark .cm-tag {color: #e06c75;}
.cm-s-one-dark .cm-attribute {color: #d19a66;}
.cm-s-one-dark .cm-link {color: #98c379;border-bottom: solid 1px #98c379;}
.cm-s-one-dark .cm-builtin {color: #e06c75;}
.cm-s-one-dark .cm-keyword {color: #c678dd;}
.cm-s-one-dark .cm-def {color: #e5c07b;} /* original: #d19a66; */
.cm-s-one-dark .cm-atom {color: #d19a66;}
.cm-s-one-dark .cm-number {color: #d19a66;}
.cm-s-one-dark .cm-property {color: #56b6c2;} /* original: #abb2bf */
.cm-s-one-dark .cm-qualifier {color: #d19a66;}
.cm-s-one-dark .cm-variable {color: #e06c75;}
.cm-s-one-dark .cm-string {color: #98c379;}
.cm-s-one-dark .cm-punctuation {color: #abb2bf;}
.cm-s-one-dark .cm-operator {color: #56b6c2;} /* original: #abb2bf */
.cm-s-one-dark .cm-meta {color: #abb2bf;}
.cm-s-one-dark .cm-bracket {color: #abb2bf;}
.cm-s-one-dark .cm-comment {color: #5c6370;font-style: italic;}
.cm-s-one-dark .cm-error {color: #e06c75;}
/* css syntax corrections */
.cm-s-one-dark .cm-m-css.cm-variable {color: #828997;}
.cm-s-one-dark .cm-m-css.cm-property {color: #abb2bf;}
.cm-s-one-dark .cm-m-css.cm-atom {color: #56b6c2;}
.cm-s-one-dark .cm-m-css.cm-builtin {color: #56b6c2;}
/* lua syntax corrections */
.cm-s-one-dark .cm-m-lua.cm-variable {color: #56b6c2;}• JavaScript Highlight Syntax
var input = document.getElementById("select");
function selectTheme() {
var theme = input.options[input.selectedIndex].textContent;
editor.setOption("theme", theme);
location.hash = "#" + theme;
}
var choice = (location.hash && location.hash.slice(1)) ||
(document.location.search &&
decodeURIComponent(document.location.search.slice(1)));
if (choice) {
input.value = choice;
editor.setOption("theme", choice);
}
CodeMirror.on(window, "hashchange", function() {
var theme = location.hash.slice(1);
if (theme) {
input.value = theme;
selectTheme();
}
});• CodeMirror Syntax Highlighting
Diatas merupakan jenis-jenis pemrograman yang digunakan ataupun dikembangkan terus menerus oleh pengembang code. Pemrograman warna yang kaya dan sistem CSS themes tersedia di CodeMirror agar sesuai dengan aplikasi, dan themes jenis-jenis pemrograman dan memperluasnya dengan fungsionalitas baru. Misalnya membuat live editor ataupun code editor, programming, scripting, dan menambahkan banyak tutorial yang ia kembangkan dimasing-masing editor. Sekian tentang jelajah CodeMirror Syntax-Highlighting HTML CSS JavaScript di Blogger.
0 Comments
Post a Comment