diff --git a/client/components/editor-code.vue b/client/components/editor-code.vue index 3ea2c2fa..05e5545a 100644 --- a/client/components/editor-code.vue +++ b/client/components/editor-code.vue @@ -111,6 +111,8 @@ import 'codemirror/addon/search/match-highlighter.js' // Markdown-it import MarkdownIt from 'markdown-it' +import mdEmoji from 'markdown-it-emoji' +import mdTaskLists from 'markdown-it-task-lists' import Prism from '../libs/prism/prism.js' const md = new MarkdownIt({ @@ -122,6 +124,8 @@ const md = new MarkdownIt({ return `
${str}
`
}
})
+ .use(mdEmoji)
+ .use(mdTaskLists)
export default {
components: {
@@ -131,7 +135,7 @@ export default {
return {
fabMainMenu: false,
fabInsertMenu: false,
- code: '# Header 1\n\nSample **Text**\nhttp://wiki.js.org\n\n## Header 2\nSample Text\n\n```javascript\nvar test = require("test");\n\n// some comment\nconst foo = bar(\'param\') + 1.234;\n```',
+ code: '# Header 1\n\nSample **Text**\nhttp://wiki.js.org\n:rocket: :) :( :| :P\n\n## Header 2\nSample Text\n\n```javascript\nvar test = require("test");\n\n// some comment\nconst foo = bar(\'param\') + 1.234;\n```\n\n### Header 3\nLorem *ipsum* ~~text~~',
cmOptions: {
tabSize: 2,
mode: 'text/markdown',
diff --git a/client/scss/app.scss b/client/scss/app.scss
index 358fba1f..67f0454d 100644
--- a/client/scss/app.scss
+++ b/client/scss/app.scss
@@ -12,7 +12,7 @@
@import 'components/toggle';
@import 'components/typography';
-@import '../libs/twemoji/twemoji-awesome';
+// @import '../libs/twemoji/twemoji-awesome';
@import '../libs/prism/prism.css';
@import 'node_modules/diff2html/dist/diff2html.min';
diff --git a/client/scss/base/print.scss b/client/scss/base/print.scss
index c5bc685a..f06334e1 100644
--- a/client/scss/base/print.scss
+++ b/client/scss/base/print.scss
@@ -35,6 +35,4 @@
}
}
}
-
- @import 'node_modules/highlight.js/styles/atom-one-light';
}
diff --git a/client/scss/components/markdown-content.scss b/client/scss/components/markdown-content.scss
index b7c45ce7..01b5450b 100644
--- a/client/scss/components/markdown-content.scss
+++ b/client/scss/components/markdown-content.scss
@@ -1,13 +1,14 @@
.markdown-content {
font-size: 1rem;
- color: mc('blue-grey', '900');
+ color: mc('blue-grey', '800');
// --------------------------------------------
// Headers
// --------------------------------------------
h1, h2, h3, h4, h5, h6 {
- color: mc('blue-grey', '800');
+ color: mc('blue-grey', '700');
+ font-weight: 600;
}
> * + h1, > * + h2, > * + h3, > * + h4 {
@@ -15,16 +16,17 @@
}
h1 {
font-size: 1.5rem;
- border-bottom: 1px solid mc('blue-grey', '100');
+ border-bottom: 2px solid mc('blue-grey', '100');
margin-bottom: 1rem;
}
h2 {
font-size: 1.25rem;
- border-bottom: 1px dotted mc('blue-grey', '100');
+ border-bottom: 1px solid mc('blue-grey', '100');
margin-bottom: .75rem;
}
h3 {
font-size: 1.15rem;
+ border-bottom: 1px dotted mc('blue-grey', '100');
margin-bottom: .5rem;
}
h4 {
@@ -58,4 +60,13 @@
}
}
}
+
+ .task-list-item {
+ display: flex;
+ align-items: center;
+
+ &-checkbox {
+ margin-right: .5rem;
+ }
+ }
}