1.0.0 • Published 8 years ago
microlight-css-selection v1.0.0
microlight.js
Note: This is a fork to add css based selection, view the original at https://github.com/asvd/microlight
microlight.js is a micro-library (2.2k minified) which improves readability of code snippets by highlighting, for any programming language, yet without attaching additional language packages:
For a demo refer to http://codepen.io/zephyr/pen/MewjYd
CSS
The following are some recommended css rules to target the elements within microlight
.microlight {
font-family: monospace;
white-space: pre;
background-color: #263238;
color: #AABBC3;
padding: 15px;
text-align: left;
overflow-x: auto;
box-shadow: 0 2px 3px rgba(0,0,0,0.5);
border-radius: 0.2em;
}
.microlight:not(:last-child) {
margin-bottom: 15px;
}
// Colours inspired by https://atom.io/themes/atom-material-syntax
.microlight span[data_microlight_type="not-formatted"] {
color: #B2CCD6;
}
.microlight span[data_microlight_type="keywords"] {
color: #F1E655;
}
.microlight span[data_microlight_type="punctuation"] {
color: #d9f5dd;
}
.microlight span[data_microlight_type="strings-regex"] {
color: #C3E88D;
}
.microlight span[data_microlight_type="comments"] {
color: #49656f;
}