Add styling documentation to README.md and add new styling demo (#90)

viebel · e8f427dacc1bd0f1e982b0d35123d0c396550a01 · bundance committed with viebel Jul 25, 2016 · Jul 25, 2016 · e8f427d
1 parent 20105dd
commit e8f427dacc1bd0f1e982b0d35123d0c396550a01
Unified Split

Showing with 146 additions and 0 deletions.

+15 −0 README.md

+35 −0 demos/styling/klipse.html

+96 −0 demos/styling/theme.css
diff --git a/README.md b/README.md
@@ -163,6 +163,20 @@ The following attributes can be added to the DOM element of the snippet:
 * `data-static-fns`: (default `false`) set to true for using [static dispatch](http://blog.klipse.tech/clojurescript/2016/04/13/static-fns.html)
 * `data-eval-context`: (default `statement`) indicates the evaluation context that will be passed to cljs/eval-str. One in `expr`, `statement`, `return`.  
 
+## Styling
+The Klipse plugin can be easily styled with CSS, which can be applied both to the Klipse plugin's own elements, and to the CodeMirror editor's elements. Much of the styling you'll apply will be to CodeMirror, as it contains all the CSS classes to style the code itself. Surrounding CodeMirror is the Klipse plugin, the styles of which control the plugin's borders, and the executed code's output.
+
+### Changing the style of CodeMirror
+You can change the theme of the CodeMirror editor simply by modifying its [CSS](http://codemirror.net/doc/manual.html#styling). If you don't want to create your own theme, Farhad Gayour has an awesome [list of ready-made themes](http://farhadg.github.io/code-mirror-themes/) you can select from. Have a look at the different themes by selecting them from the drop-down. Once you've found one you like, head to the [theme repo](https://github.com/FarhadG/code-mirror-themes/tree/master/themes) to copy the CSS, paste it into a CSS file, and link to it from the HTML page containing your Klipse plugin.
+
+### Changing the style of the Klipse plugin
+To change the style of the Klipse plugin's borders and the console output, you'll need to add a few extra style rules to your CSS file. These are:
+
+- `.CodeMirror` - modify the plugin's borders and CodeMirror's containing `div`
+- `.CodeMirror:last-child::before` - modify the console's title (i.e. the bit that says _Output:_)
+- `.CodeMirror:last-child` - modify the console area (i.e. the area beneath _Output:_)
+
+You can see an example of styling Klipse in `demos/styling`.
 
 ## Community
 
@@ -173,6 +187,7 @@ Here are a couple of examples of blogs using the klipse plugin:
 - clojure: [z.caudate.me - live documentation with klipse](http://z.caudate.me/klipse-demo/)
 - ruby, javascript, clojure: [blog.klipse.tech](blog.klipse.tech)
 - clojure documentation: [Anonymous functions in clojure](http://clojurebridge.github.io/community-docs/docs/clojure/anonymous-function/)
+- javascript: [Untangled.io - Advanced ES6 destructuring techniques with live examples](http://untangled.io/in-depth-es6-destructuring-with-assembled-avengers/)
 
 Ask us any question about the klipse plugin (integration, feature requests...) on [![Join the chat at https://gitter.im/viebel/klipse](https://badges.gitter.im/viebel/klipse.svg)](https://gitter.im/viebel/klipse?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
diff --git a/demos/styling/klipse.html b/demos/styling/klipse.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+  <link rel="stylesheet" type="text/css" href="http://app.klipse.tech/css/codemirror.css">
+  
+  <!-- Your custom CSS styles -->
+  <link rel="stylesheet" type="text/css" href="theme.css">
+	
+	<title>Klipse Theme Example</title>
+
+</style>
+</head>
+
+<body>
+	<!-- KLIPSE PLUGIN -->
+  <pre>
+    <code class="language-klipse-eval-js">
+    [1, 2, 3].map(function(x) {
+      return x + 1;
+    })
+    </code>
+  </pre>
+
+<!-- CONFIGURE KLIPSE -->
+<script>
+    window.klipse_settings = {
+        selector_eval_js: '.language-klipse-eval-js', // css selector for the html elements you want to klipsify
+    };
+</script>
+<script src="http://app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
+
+</body>
+</html>
diff --git a/demos/styling/theme.css b/demos/styling/theme.css
@@ -0,0 +1,96 @@
+/**************** KLIPSE-SPECIFIC RULES ***********************/
+
+/* Modify the Code editor's borders */
+.CodeMirror {
+    padding: 10px; 
+    border: none !important;
+}
+
+/* Modify the console title i.e. the bit that says 'Output:') */
+.CodeMirror:last-child::before {
+  content: "Output:";
+  display: block;
+  margin: -10px;
+  padding: 15px 10px 5px 10px;
+  background-color: #272822;
+  color: #aaaaaa;
+  font-family: Montserrat, Arial, sans-serif;
+  font-style: italic; 
+}
+
+/* Modify the console area (i.e. the area beneath 'Output:') */
+.CodeMirror:last-child {
+  background-color: #272822;
+  border: 1px solid #2196f3 !important;
+}
+
+
+/*************** STANDARD CODEMIRROR RULES *********************
+/* 
+/* Create your own or copy and paste the ones available at 
+/* http://farhadg.github.io/code-mirror-themes/)
+*/
+.cm-s-default {
+	font-size: 1em;
+	line-height: 1.5em;
+	font-family: inconsolata, monospace;
+	letter-spacing: 0.3px;
+	word-spacing: 1px;
+	background: #272822;
+	color: #F8F8F2;
+}
+.cm-s-default .CodeMirror-lines {
+	padding: 8px 0;
+}
+.cm-s-default .CodeMirror-gutters {
+	box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.5);
+	-webkit-box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.5);
+	background-color: #272822;
+	padding-right: 10px;
+	z-index: 3;
+	border: none;
+}
+.cm-s-default div.CodeMirror-cursor {
+	border-left: 3px solid #F8F8F2;
+}
+.cm-s-default .CodeMirror-activeline-background {
+	background: #3E3D32;
+}
+.cm-s-default .CodeMirror-selected {
+	background-color: #49483E !important;
+    z-index: 9999 !important;
+}
+.cm-s-default .cm-comment {
+	color: #75715E;
+}
+.cm-s-default .cm-string {
+	color: #E6DB74;
+}
+.cm-s-default .cm-number {
+	color: #66D9EF;
+}
+.cm-s-default .cm-atom {
+	color: #66D9EF;
+}
+.cm-s-default .cm-keyword {
+	color: #F92672;
+}
+.cm-s-default .cm-variable {
+	color: #A6E22E;
+}
+.cm-s-default .cm-def {
+	font-style: italic;
+	color: #FD971F;
+}
+.cm-s-default .cm-variable-2 {
+	color: #F92672;
+}
+.cm-s-default .cm-property {
+	color: #66D9EF;
+}
+.cm-s-default .cm-operator {
+	color: #F92672;
+}
+.cm-s-default .CodeMirror-linenumber {
+	color: #75715E;
+}