SolarizedSyntaxHighlight is a CSS support for the syntax highlighting feature that stylize blocks of code with the Solarized color scheme.
Note: it will not work for the source editor and VisualEditor.
It automatically activates the light or dark themes, depending on the wiki theme or the user preferred theme (if they're not deferring to the wiki preset).
Installation
Usage
After this, instead of using the regular <pre> tag, editors may use the <syntaxhighlight> tag to activate the syntax highlighter.
Type:
<syntaxhighlight lang="html5">...</syntaxhighlight>for a HTML code box.<syntaxhighlight lang="css">...</syntaxhighlight>for a CSS code box.<syntaxhighlight lang="js">...</syntaxhighlight>for a JavaScript code box.
Replace than the 3 dots with the desired code.
Demo
You can change between Light/Dark themes to check both styles.
HTML
<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<title>Lorem Ipsum</title>
<style>
div { margin: 0; }
</style>
<script type="text/javascript"
src="../j/got.js">
</script>
</head>
<body>
<h1 id="lorem">Lorem Ipsum</h1>
<div class="left">
<img src="../1.png">
</div>
<p style="color:#333;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>
CSS
/* CSS */
body {
margin: 0;
}
#lorem-ipsum {
background: blueviolet;
}
.lorem-ipsum {
color: #ee2;
}
.button:hover {
border: 2px inset rgba(95, 55, 112, 0.6);
}
nav.menu {
background-image: url(../images/gradient.png);
}
@media only screen and (max-width: 600px) {
#site {
overflow: hidden !important;
}
}
input[type="text"],
input[type="search"] {
background-color: #eee3;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
}
JavaScript
let person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
Text above can be found here (edit)