mirror of
https://github.com/documize/community.git
synced 2025-07-23 15:19:42 +02:00
Improved Markdown and Code section themes
This commit is contained in:
Harvey Kandola
parent
5235efdb34
commit
b31c4d4850
6 changed files with 104 additions and 160 deletions
|
|
@ -71,7 +71,7 @@ export default Ember.Component.extend(TooltipMixin, {
|
|||
|
||||
didInsertElement() {
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById(this.get('editorId')), {
|
||||
theme: "solarized dark",
|
||||
theme: "material",
|
||||
lineNumbers: true,
|
||||
lineWrapping: true,
|
||||
indentUnit: 4,
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export default Ember.Component.extend({
|
|||
let elem = `page-${page.id}-code`;
|
||||
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById(elem), {
|
||||
theme: "solarized dark",
|
||||
theme: "material",
|
||||
lineNumbers: true,
|
||||
lineWrapping: true,
|
||||
indentUnit: 4,
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ export default Ember.Component.extend(TooltipMixin, {
|
|||
|
||||
didInsertElement() {
|
||||
this.attachEditor();
|
||||
this.addTooltip(document.getElementById(this.get('tooltipId')));
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
|
|
@ -90,14 +91,10 @@ export default Ember.Component.extend(TooltipMixin, {
|
|||
return this.get('codeEditor').getDoc().getValue();
|
||||
},
|
||||
|
||||
didRender() {
|
||||
this.addTooltip(document.getElementById(this.get('tooltipId')));
|
||||
},
|
||||
|
||||
attachEditor() {
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById(this.get('editorId')), {
|
||||
theme: "solarized light",
|
||||
lineNumbers: true,
|
||||
theme: "default",
|
||||
lineNumbers: false,
|
||||
lineWrapping: true,
|
||||
indentUnit: 4,
|
||||
tabSize: 4,
|
||||
|
|
@ -128,6 +125,7 @@ export default Ember.Component.extend(TooltipMixin, {
|
|||
if (this.get('editMode')) {
|
||||
this.attachEditor();
|
||||
} else {
|
||||
this.set('pageBody',this.getBody());
|
||||
let md = window.markdownit({ linkify: true });
|
||||
let result = md.render(this.getBody());
|
||||
|
||||
|
|
|
|||
|
|
@ -341,163 +341,100 @@ div.CodeMirror-dragcursors {
|
|||
span.CodeMirror-selectedtext { background: none; }
|
||||
|
||||
/*
|
||||
Solarized theme for code-mirror
|
||||
http://ethanschoonover.com/solarized
|
||||
|
||||
Name: material
|
||||
Author: Michael Kaminsky (http://github.com/mkaminsky11)
|
||||
|
||||
Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme)
|
||||
|
||||
*/
|
||||
|
||||
.cm-s-material.CodeMirror {
|
||||
background-color: #263238;
|
||||
color: rgba(233, 237, 237, 1);
|
||||
}
|
||||
.cm-s-material .CodeMirror-gutters {
|
||||
background: #263238;
|
||||
color: rgb(83,127,126);
|
||||
border: none;
|
||||
}
|
||||
.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber { color: rgb(83,127,126); }
|
||||
.cm-s-material .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
|
||||
.cm-s-material div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
|
||||
.cm-s-material.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
|
||||
.cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
|
||||
.cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
|
||||
|
||||
.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
|
||||
.cm-s-material .cm-keyword { color: rgba(199, 146, 234, 1); }
|
||||
.cm-s-material .cm-operator { color: rgba(233, 237, 237, 1); }
|
||||
.cm-s-material .cm-variable-2 { color: #80CBC4; }
|
||||
.cm-s-material .cm-variable-3 { color: #82B1FF; }
|
||||
.cm-s-material .cm-builtin { color: #DECB6B; }
|
||||
.cm-s-material .cm-atom { color: #F77669; }
|
||||
.cm-s-material .cm-number { color: #F77669; }
|
||||
.cm-s-material .cm-def { color: rgba(233, 237, 237, 1); }
|
||||
.cm-s-material .cm-string { color: #C3E88D; }
|
||||
.cm-s-material .cm-string-2 { color: #80CBC4; }
|
||||
.cm-s-material .cm-comment { color: #546E7A; }
|
||||
.cm-s-material .cm-variable { color: #82B1FF; }
|
||||
.cm-s-material .cm-tag { color: #80CBC4; }
|
||||
.cm-s-material .cm-meta { color: #80CBC4; }
|
||||
.cm-s-material .cm-attribute { color: #FFCB6B; }
|
||||
.cm-s-material .cm-property { color: #80CBAE; }
|
||||
.cm-s-material .cm-qualifier { color: #DECB6B; }
|
||||
.cm-s-material .cm-variable-3 { color: #DECB6B; }
|
||||
.cm-s-material .cm-tag { color: rgba(255, 83, 112, 1); }
|
||||
.cm-s-material .cm-error {
|
||||
color: rgba(255, 255, 255, 1.0);
|
||||
background-color: #EC5F67;
|
||||
}
|
||||
.cm-s-material .CodeMirror-matchingbracket {
|
||||
text-decoration: underline;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/*
|
||||
Solarized color pallet
|
||||
http://ethanschoonover.com/solarized/img/solarized-palette.png
|
||||
|
||||
Name: yeti
|
||||
Author: Michael Kaminsky (http://github.com/mkaminsky11)
|
||||
|
||||
Original yeti color scheme by Jesse Weed (https://github.com/jesseweed/yeti-syntax)
|
||||
|
||||
*/
|
||||
|
||||
.solarized.base03 { color: #002b36; }
|
||||
.solarized.base02 { color: #073642; }
|
||||
.solarized.base01 { color: #586e75; }
|
||||
.solarized.base00 { color: #657b83; }
|
||||
.solarized.base0 { color: #839496; }
|
||||
.solarized.base1 { color: #93a1a1; }
|
||||
.solarized.base2 { color: #eee8d5; }
|
||||
.solarized.base3 { color: #fdf6e3; }
|
||||
.solarized.solar-yellow { color: #b58900; }
|
||||
.solarized.solar-orange { color: #cb4b16; }
|
||||
.solarized.solar-red { color: #dc322f; }
|
||||
.solarized.solar-magenta { color: #d33682; }
|
||||
.solarized.solar-violet { color: #6c71c4; }
|
||||
.solarized.solar-blue { color: #268bd2; }
|
||||
.solarized.solar-cyan { color: #2aa198; }
|
||||
.solarized.solar-green { color: #859900; }
|
||||
|
||||
/* Color scheme for code-mirror */
|
||||
|
||||
.cm-s-solarized {
|
||||
line-height: 1.45em;
|
||||
color-profile: sRGB;
|
||||
rendering-intent: auto;
|
||||
}
|
||||
.cm-s-solarized.cm-s-dark {
|
||||
color: #839496;
|
||||
background-color: #002b36;
|
||||
text-shadow: #002b36 0 1px;
|
||||
}
|
||||
.cm-s-solarized.cm-s-light {
|
||||
background-color: #fdf6e3;
|
||||
color: #657b83;
|
||||
text-shadow: #eee8d5 0 1px;
|
||||
.cm-s-yeti.CodeMirror {
|
||||
background-color: #ECEAE8 !important;
|
||||
color: #d1c9c0 !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cm-s-solarized .CodeMirror-widget {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.cm-s-solarized .cm-header { color: #586e75; }
|
||||
.cm-s-solarized .cm-quote { color: #93a1a1; }
|
||||
|
||||
.cm-s-solarized .cm-keyword { color: #cb4b16; }
|
||||
.cm-s-solarized .cm-atom { color: #d33682; }
|
||||
.cm-s-solarized .cm-number { color: #d33682; }
|
||||
.cm-s-solarized .cm-def { color: #2aa198; }
|
||||
|
||||
.cm-s-solarized .cm-variable { color: #839496; }
|
||||
.cm-s-solarized .cm-variable-2 { color: #b58900; }
|
||||
.cm-s-solarized .cm-variable-3 { color: #6c71c4; }
|
||||
|
||||
.cm-s-solarized .cm-property { color: #2aa198; }
|
||||
.cm-s-solarized .cm-operator { color: #6c71c4; }
|
||||
|
||||
.cm-s-solarized .cm-comment { color: #586e75; font-style:italic; }
|
||||
|
||||
.cm-s-solarized .cm-string { color: #859900; }
|
||||
.cm-s-solarized .cm-string-2 { color: #b58900; }
|
||||
|
||||
.cm-s-solarized .cm-meta { color: #859900; }
|
||||
.cm-s-solarized .cm-qualifier { color: #b58900; }
|
||||
.cm-s-solarized .cm-builtin { color: #d33682; }
|
||||
.cm-s-solarized .cm-bracket { color: #cb4b16; }
|
||||
.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; }
|
||||
.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; }
|
||||
.cm-s-solarized .cm-tag { color: #93a1a1; }
|
||||
.cm-s-solarized .cm-attribute { color: #2aa198; }
|
||||
.cm-s-solarized .cm-hr {
|
||||
color: transparent;
|
||||
border-top: 1px solid #586e75;
|
||||
display: block;
|
||||
}
|
||||
.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; }
|
||||
.cm-s-solarized .cm-special { color: #6c71c4; }
|
||||
.cm-s-solarized .cm-em {
|
||||
color: #999;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
.cm-s-solarized .cm-strong { color: #eee; }
|
||||
.cm-s-solarized .cm-error,
|
||||
.cm-s-solarized .cm-invalidchar {
|
||||
color: #586e75;
|
||||
border-bottom: 1px dotted #dc322f;
|
||||
}
|
||||
|
||||
.cm-s-solarized.cm-s-dark div.CodeMirror-selected { background: #073642; }
|
||||
.cm-s-solarized.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); }
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(7, 54, 66, 0.99); }
|
||||
|
||||
.cm-s-solarized.cm-s-light div.CodeMirror-selected { background: #eee8d5; }
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: #eee8d5; }
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-ligh .CodeMirror-line > span::-moz-selection, .cm-s-ligh .CodeMirror-line > span > span::-moz-selection { background: #eee8d5; }
|
||||
|
||||
/* Editor styling */
|
||||
|
||||
/* Little shadow on the view-port of the buffer view */
|
||||
.cm-s-solarized.CodeMirror {
|
||||
-moz-box-shadow: inset 7px 0 12px -6px #000;
|
||||
-webkit-box-shadow: inset 7px 0 12px -6px #000;
|
||||
box-shadow: inset 7px 0 12px -6px #000;
|
||||
}
|
||||
|
||||
/* Gutter border and some shadow from it */
|
||||
.cm-s-solarized .CodeMirror-gutters {
|
||||
border-right: 1px solid;
|
||||
}
|
||||
|
||||
/* Gutter colors and line number styling based of color scheme (dark / light) */
|
||||
|
||||
/* Dark */
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
|
||||
background-color: #002b36;
|
||||
border-color: #00232c;
|
||||
}
|
||||
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
|
||||
text-shadow: #021014 0 -1px;
|
||||
}
|
||||
|
||||
/* Light */
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-gutters {
|
||||
background-color: #fdf6e3;
|
||||
border-color: #eee8d5;
|
||||
}
|
||||
|
||||
/* Common */
|
||||
.cm-s-solarized .CodeMirror-linenumber {
|
||||
color: #586e75;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; }
|
||||
|
||||
.cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text {
|
||||
color: #586e75;
|
||||
}
|
||||
|
||||
.cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; }
|
||||
|
||||
/*
|
||||
Active line. Negative margin compensates left padding of the text in the
|
||||
view-port
|
||||
*/
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-activeline-background {
|
||||
background: rgba(0, 0, 0, 0.10);
|
||||
.cm-s-yeti .CodeMirror-gutters {
|
||||
color: #adaba6;
|
||||
background-color: #E5E1DB;
|
||||
border: none;
|
||||
}
|
||||
.cm-s-yeti .CodeMirror-cursor { border-left: solid thin #d1c9c0; }
|
||||
.cm-s-yeti .CodeMirror-linenumber { color: #adaba6; }
|
||||
.cm-s-yeti.CodeMirror-focused div.CodeMirror-selected { background: #DCD8D2; }
|
||||
.cm-s-yeti .CodeMirror-line::selection, .cm-s-yeti .CodeMirror-line > span::selection, .cm-s-yeti .CodeMirror-line > span > span::selection { background: #DCD8D2; }
|
||||
.cm-s-yeti .CodeMirror-line::-moz-selection, .cm-s-yeti .CodeMirror-line > span::-moz-selection, .cm-s-yeti .CodeMirror-line > span > span::-moz-selection { background: #DCD8D2; }
|
||||
.cm-s-yeti span.cm-comment { color: #d4c8be; }
|
||||
.cm-s-yeti span.cm-string, .cm-s-yeti span.cm-string-2 { color: #96c0d8; }
|
||||
.cm-s-yeti span.cm-number { color: #a074c4; }
|
||||
.cm-s-yeti span.cm-variable { color: #55b5db; }
|
||||
.cm-s-yeti span.cm-variable-2 { color: #a074c4; }
|
||||
.cm-s-yeti span.cm-def { color: #55b5db; }
|
||||
.cm-s-yeti span.cm-operator { color: #9fb96e; }
|
||||
.cm-s-yeti span.cm-keyword { color: #9fb96e; }
|
||||
.cm-s-yeti span.cm-atom { color: #a074c4; }
|
||||
.cm-s-yeti span.cm-meta { color: #96c0d8; }
|
||||
.cm-s-yeti span.cm-tag { color: #96c0d8; }
|
||||
.cm-s-yeti span.cm-attribute { color: #9fb96e; }
|
||||
.cm-s-yeti span.cm-qualifier { color: #96c0d8; }
|
||||
.cm-s-yeti span.cm-property { color: #a074c4; }
|
||||
.cm-s-yeti span.cm-builtin { color: #a074c4; }
|
||||
.cm-s-yeti span.cm-variable-3 { color: #96c0d8; }
|
||||
.cm-s-yeti .CodeMirror-activeline-background { background: #E7E4E0; }
|
||||
.cm-s-yeti .CodeMirror-matchingbracket { text-decoration: underline; }
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
.section-markdown-editor {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.section-markdown-preview {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -6,11 +6,16 @@
|
|||
<style>
|
||||
.CodeMirror {
|
||||
height: auto !important;
|
||||
font-family: Helvetica;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.CodeMirror pre {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="section-code-editor">
|
||||
<div class="section-markdown-editor">
|
||||
{{#if editMode}}
|
||||
{{focus-textarea value=pageBody id=editorId class="mousetrap"}}
|
||||
{{else}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue