mirror of https://github.com/requarks/wiki
Nick
6 years ago
parent
ca4e0ada30
commit
de1dddbc90
@ -0,0 +1,335 @@
|
||||
<template lang='pug'>
|
||||
v-card.editor-markdown-help.animated.fadeInLeft(flat, tile)
|
||||
v-container.pa-3(grid-list-lg, fluid)
|
||||
v-layout(row, wrap)
|
||||
v-flex(xs4)
|
||||
v-card.radius-7.animated.fadeInUp(light)
|
||||
v-card-text
|
||||
.d-flex
|
||||
v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44')
|
||||
v-icon.mr-3(color='teal') info
|
||||
.body-2.teal--text Markdown Reference
|
||||
.body-2.mt-3 Bold
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div **Lorem ipsum**
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text
|
||||
.caption: strong Lorem ipsum
|
||||
.body-2.mt-3 Italic
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div *Lorem ipsum*
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text
|
||||
.caption: em Lorem ipsum
|
||||
.body-2.mt-3 Strikethrough
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div ~~Lorem ipsum~~
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text
|
||||
.caption(style='text-decoration: line-through;') Lorem ipsum
|
||||
.body-2.mt-3 Headers
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div # Header 1
|
||||
div ## Header 2
|
||||
div ### Header 3
|
||||
div #### Header 4
|
||||
div ##### Header 5
|
||||
div ###### Header 6
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text
|
||||
div(style='font-weight: 700; font-size: 24px;') Header 1
|
||||
div(style='font-weight: 700; font-size: 22px;') Header 2
|
||||
div(style='font-weight: 700; font-size: 20px;') Header 3
|
||||
div(style='font-weight: 700; font-size: 18px;') Header 4
|
||||
div(style='font-weight: 700; font-size: 16px;') Header 5
|
||||
div(style='font-weight: 700; font-size: 14px;') Header 6
|
||||
.body-2.mt-3 Unordered Lists
|
||||
.caption.grey--text.text--darken-1: em You can also use the asterisk symbol instead of the dash.
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div - Unordered List Item 1
|
||||
div - Unordered List Item 2
|
||||
div - Unordered List Item 3
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text
|
||||
ul
|
||||
li Unordered List Item 1
|
||||
li Unordered List Item 2
|
||||
li Unordered List Item 3
|
||||
.body-2.mt-3 Ordered Lists
|
||||
.caption.grey--text.text--darken-1: em Even though we prefix all lines with #[strong 1.], the output will be correctly numbered automatically.
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div 1. Ordered List Item 1
|
||||
div 1. Ordered List Item 2
|
||||
div 1. Ordered List Item 3
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text
|
||||
ol
|
||||
li Unordered List Item 1
|
||||
li Unordered List Item 2
|
||||
li Unordered List Item 3
|
||||
|
||||
v-flex(xs4)
|
||||
v-card.radius-7.animated.fadeInUp.wait-p1s(light)
|
||||
v-card-text
|
||||
.d-flex
|
||||
v-toolbar.radius-7(color='teal lighten-5', dense, flat, height='44')
|
||||
v-icon.mr-3(color='teal') info
|
||||
.body-2.teal--text Markdown Reference (continued)
|
||||
.body-2.mt-3 Superscript
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div Lorem ^ipsum^
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text
|
||||
.caption Lorem #[sup ipsum]
|
||||
.body-2.mt-3 Subscript
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div Lorem ~ipsum~
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text
|
||||
.caption: em Lorem #[sub ipsum]
|
||||
.body-2.mt-3 Horizontal Line
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div Lorem ipsum
|
||||
div ---
|
||||
div Dolor sit amet
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text
|
||||
.caption Lorem ipsum
|
||||
v-divider.my-2
|
||||
.caption Dolor sit amet
|
||||
.body-2.mt-3 Inline Code
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div Lorem `ipsum dolor sit` amet
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text
|
||||
.caption Lorem #[code ipsum dolor sit] amet
|
||||
.body-2.mt-3 Code Blocks
|
||||
.caption.grey--text.text--darken-1: em In the example below, #[strong js] defines the syntax highlighting language to use. It can be omitted.
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div ```js
|
||||
div function main () {
|
||||
div.pl-3 echo 'Lorem ipsum'
|
||||
div }
|
||||
div ```
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text.contents
|
||||
pre.prismjs.line-numbers.language-js
|
||||
code.language-js
|
||||
span.token.keyword function
|
||||
span.token.function main
|
||||
span.token.punctuation (
|
||||
span.token.punctuation )
|
||||
span.token.punctuation {#[br]
|
||||
| echo
|
||||
span.token.string 'Lorem ipsum'#[br]
|
||||
span.token.punctuation }
|
||||
span.line-numbers-rows(aria-hidden='true')
|
||||
span
|
||||
span
|
||||
span
|
||||
.body-2.mt-3 Blockquotes
|
||||
v-layout(row)
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-source(flat)
|
||||
v-card-text
|
||||
div > Lorem ipsum
|
||||
div > dolor sit amet
|
||||
div > consectetur adipiscing elit
|
||||
v-icon chevron_right
|
||||
v-flex(xs6)
|
||||
v-card.editor-markdown-help-result(flat)
|
||||
v-card-text
|
||||
blockquote(style='border: 1px solid #263238; border-radius: .5rem; padding: 1rem 24px;') Lorem ipsum#[br]dolor sit amet#[br]consectetur adipiscing elit
|
||||
|
||||
v-flex(xs4)
|
||||
v-card.radius-7.animated.fadeInUp.wait-p2s(light)
|
||||
v-card-text
|
||||
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
|
||||
v-icon.mr-3(color='teal') keyboard
|
||||
.body-2.teal--text Keyboard Shortcuts
|
||||
v-list.editor-markdown-help-kbd(two-line, dense)
|
||||
v-list-tile
|
||||
v-list-tile-content.body-2 Bold
|
||||
v-list-tile-action #[kbd {{ctrlKey}}] + #[kbd B]
|
||||
v-divider
|
||||
v-list-tile
|
||||
v-list-tile-content.body-2 Italic
|
||||
v-list-tile-action #[kbd {{ctrlKey}}] + #[kbd I]
|
||||
v-divider
|
||||
v-list-tile
|
||||
v-list-tile-content.body-2 Increase Header Level
|
||||
v-list-tile-action #[kbd {{ctrlKey}}] + #[kbd {{altKey}}] + #[kbd Right]
|
||||
v-divider
|
||||
v-list-tile
|
||||
v-list-tile-content.body-2 Decrease Header Level
|
||||
v-list-tile-action #[kbd {{ctrlKey}}] + #[kbd {{altKey}}] + #[kbd Left]
|
||||
v-divider
|
||||
v-list-tile
|
||||
v-list-tile-content.body-2 Save
|
||||
v-list-tile-action #[kbd {{ctrlKey}}] + #[kbd S]
|
||||
v-divider
|
||||
v-list-tile
|
||||
v-list-tile-content.body-2 Undo
|
||||
v-list-tile-action #[kbd {{ctrlKey}}] + #[kbd Z]
|
||||
v-divider
|
||||
v-list-tile
|
||||
v-list-tile-content.body-2 Redo
|
||||
v-list-tile-action #[kbd {{ctrlKey}}] + #[kbd Y]
|
||||
v-divider
|
||||
v-list-tile
|
||||
v-list-tile-content
|
||||
v-list-tile-title.body-2 Distraction Free Mode
|
||||
v-list-tile-sub-title Press <kbd>Esc</kbd> to exit.
|
||||
v-list-tile-action #[kbd F11]
|
||||
|
||||
v-card.radius-7.animated.fadeInUp.wait-p3s.mt-3(light)
|
||||
v-card-text
|
||||
v-toolbar.radius-7(color='teal lighten-5', dense, flat)
|
||||
v-icon.mr-3(color='teal') mouse
|
||||
.body-2.teal--text Multi-Selection
|
||||
v-list.editor-markdown-help-kbd(two-line, dense)
|
||||
v-list-tile
|
||||
v-list-tile-content.body-2 Multiple Cursors
|
||||
v-list-tile-action #[kbd {{ctrlKey}}] + Left Click
|
||||
v-divider
|
||||
v-list-tile
|
||||
v-list-tile-content.body-2 Select Region
|
||||
v-list-tile-action #[kbd {{ctrlKey}}] + #[kbd {{altKey}}] + Left Click
|
||||
v-divider
|
||||
v-list-tile
|
||||
v-list-tile-content.body-2 Deselect
|
||||
v-list-tile-action #[kbd Esc]
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
ctrlKey() { return /Mac/.test(navigator.platform) ? 'Cmd' : 'Ctrl' },
|
||||
altKey() { return /Mac/.test(navigator.platform) ? 'Option' : 'Alt' }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.editor-markdown-help {
|
||||
position: fixed;
|
||||
top: 112px;
|
||||
left: 64px;
|
||||
z-index: 10;
|
||||
width: calc(100vw - 64px - 17px);
|
||||
height: calc(100vh - 112px - 24px);
|
||||
background-color: rgba(darken(mc('grey', '900'), 3%), .9) !important;
|
||||
overflow: auto;
|
||||
|
||||
&-source {
|
||||
background-color: mc('blue-grey', '900') !important;
|
||||
border-radius: 7px;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 14px;
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
&-result {
|
||||
background-color: mc('blue-grey', '50') !important;
|
||||
border-radius: 7px;
|
||||
font-size: 14px;
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
background-color: mc('pink', '50');
|
||||
box-shadow: none;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.contents {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.prismjs {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-kbd {
|
||||
.v-list__tile__action {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
kbd {
|
||||
margin: 0 5px;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 0.1em 0.5em;
|
||||
margin: 0 0.2em;
|
||||
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
|
||||
background-color: #f7f7f7;
|
||||
color: mc('grey', '700');
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-ref {
|
||||
.v-list__tile__action {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,80 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('Roboto-MediumItalic.woff2') format('woff2'),
|
||||
url('Roboto-MediumItalic.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('Roboto-Italic.woff2') format('woff2'),
|
||||
url('Roboto-Italic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('Roboto-Bold.woff2') format('woff2'),
|
||||
url('Roboto-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
src: url('SourceSansPro-Bold.woff2') format('woff2'),
|
||||
url('SourceSansPro-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('Roboto-Regular.woff2') format('woff2'),
|
||||
url('Roboto-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('Roboto-BoldItalic.woff2') format('woff2'),
|
||||
url('Roboto-BoldItalic.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
src: url('SourceSansPro-BoldItalic.woff2') format('woff2'),
|
||||
url('SourceSansPro-BoldItalic.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
src: url('SourceSansPro-Regular.woff2') format('woff2'),
|
||||
url('SourceSansPro-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('Roboto-Medium.woff2') format('woff2'),
|
||||
url('Roboto-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
src: url('SourceSansPro-Italic.woff2') format('woff2'),
|
||||
url('SourceSansPro-Italic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue