├── docs ├── .nojekyll ├── _sidebar.md ├── components │ ├── Tutorial.md │ ├── TutorialSection.md │ ├── TutorialStep.md │ └── TutorialHighlighter.md ├── index.html └── README.md ├── vue.config.js ├── babel.config.js ├── vuese.config.js ├── src ├── style │ ├── vue-tut-anim.scss │ ├── vue-tut-section.scss │ ├── reset.scss │ ├── vue-tut.scss │ ├── code-theme │ │ └── vue.css │ ├── prism-editor.scss │ ├── vue-tut-step.scss │ ├── vue-tut-mobile.scss │ ├── vue-tut-highlighter.scss │ └── utilities.scss ├── packages │ ├── TutorialAside │ │ ├── TutorialAside.vue │ │ └── index.js │ ├── Tutorial │ │ ├── index.js │ │ └── Tutorial.vue │ ├── TutorialStep │ │ ├── index.js │ │ └── TutorialStep.vue │ ├── TutorialSection │ │ ├── index.js │ │ └── TutorialSection.vue │ └── TutorialHighlighter │ │ ├── index.js │ │ └── TutorialHighlighter.vue └── index.js ├── dist ├── themes │ ├── azure.css.map │ ├── vue.css.map │ ├── azure.css │ └── vue.css ├── code-themes │ ├── vue.css │ ├── tomorrow.css │ ├── dracula.css │ ├── okaidia.css │ ├── nord.css │ ├── hopscotch.css │ ├── atom-dark.css │ ├── dark.css │ ├── ghcolors.css │ ├── prism.css │ ├── funky.css │ ├── synthwave84.css │ ├── a11y-dark.css │ ├── solarizedlight.css │ ├── darcula.css │ ├── material-dark.css │ ├── material-light.css │ ├── material-oceanic.css │ ├── vs.css │ ├── cb.css │ ├── xonokai.css │ ├── base16-ateliersulphurpool.light.css │ ├── duotone-light.css │ ├── duotone-dark.css │ ├── duotone-earth.css │ ├── duotone-space.css │ ├── duotone-forest.css │ ├── duotone-sea.css │ ├── vsc-dark-plus.css │ ├── shades-of-purple.css │ ├── pojoaque.css │ ├── twilight.css │ └── coy.css └── vue-tut.esm.css ├── markdown ├── Tutorial.md ├── TutorialHighlighter.md ├── TutorialSection.md └── TutorialStep.md ├── .gitignore ├── scripts ├── buildDocs.sh └── buildThemes.sh ├── themes ├── azure.scss └── vue.scss ├── .eslintrc.js ├── package.json └── README.md /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false 3 | }; 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ], 5 | plugins: ['wildcard'] 6 | }; 7 | -------------------------------------------------------------------------------- /vuese.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | outDir: 'docs', 3 | genType: 'markdown', 4 | exclude: ['**/TutorialAside.vue'] 5 | }; 6 | -------------------------------------------------------------------------------- /docs/_sidebar.md: -------------------------------------------------------------------------------- 1 | * [Tutorial](/components/Tutorial.md) 2 | * [TutorialSection](/components/TutorialSection.md) 3 | * [TutorialStep](/components/TutorialStep.md) 4 | * [TutorialHighlighter](/components/TutorialHighlighter.md) 5 | 6 | -------------------------------------------------------------------------------- /src/style/vue-tut-anim.scss: -------------------------------------------------------------------------------- 1 | .vue-tut { 2 | .fade-enter-active { 3 | transition: opacity .75s; 4 | } 5 | 6 | .fade-leave-active { 7 | transition: opacity .75s; 8 | } 9 | 10 | .fade-enter, .fade-leave-to { 11 | opacity: 0; 12 | } 13 | } -------------------------------------------------------------------------------- /dist/themes/azure.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../themes/azure.scss"],"names":[],"mappings":"AACE;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"azure.css"} -------------------------------------------------------------------------------- /markdown/Tutorial.md: -------------------------------------------------------------------------------- 1 | # Tutorial 2 | 3 | ``` 4 | ... 5 | ``` 6 | 7 | The tutorial component is the main component for VueTut. 8 | It represents a single tutorial made up of sections. 9 | The following slots are available to customize the overall tutorial. 10 | -------------------------------------------------------------------------------- /dist/themes/vue.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../themes/vue.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE","file":"vue.css"} -------------------------------------------------------------------------------- /src/packages/TutorialAside/TutorialAside.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | # local env files 5 | .env.local 6 | .env.*.local 7 | 8 | # Log files 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | pnpm-debug.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /src/style/vue-tut-section.scss: -------------------------------------------------------------------------------- 1 | .vue-tut { 2 | .tutorial-section { 3 | margin: 50px; 4 | 5 | header { 6 | p { 7 | font-size: 16px; 8 | line-height: 1.4; 9 | } 10 | 11 | h1 { 12 | font-size: 20px; 13 | } 14 | 15 | h2 { 16 | font-size: 26px; 17 | } 18 | } 19 | 20 | &:last-child { 21 | margin-bottom: 0; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /markdown/TutorialHighlighter.md: -------------------------------------------------------------------------------- 1 | # TutorialHighlighter 2 | 3 | ``` 4 | 5 | 6 | 7 | ... 8 | 13 | 14 | 15 | 16 | ``` 17 | 18 | Highlight lines of text with line numbers or regexes. 19 | -------------------------------------------------------------------------------- /src/style/reset.scss: -------------------------------------------------------------------------------- 1 | .vue-tut { 2 | font-family: sans-serif; 3 | min-height: 100%; 4 | 5 | h1, h2, h3, h4, h5, h6, p { 6 | margin: 0; 7 | padding: 0; 8 | line-height: 1.15; 9 | } 10 | 11 | hr { 12 | height: 0; 13 | border: 0; 14 | border-bottom: 1px solid #e8e8e8; 15 | } 16 | 17 | * { 18 | box-sizing: border-box; 19 | } 20 | 21 | *:before, 22 | *:after { 23 | box-sizing: border-box; 24 | } 25 | } -------------------------------------------------------------------------------- /markdown/TutorialSection.md: -------------------------------------------------------------------------------- 1 | # TutorialSection 2 | 3 | ``` 4 | 5 | ... 6 | 7 | ``` 8 | 9 | The tutorial-section component is a way to group a tutorial into sections - like chapters in a book. 10 | 11 | A tutorial needs at least one section, but you should try to have multiple to make the tutorial easier to consume for readers. 12 | 13 | The following slots are available to customize a section. 14 | -------------------------------------------------------------------------------- /scripts/buildDocs.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | cp README.md docs/ 4 | 5 | npm run docs:vuese 6 | 7 | for name in docs/components/* 8 | do 9 | tail -n +3 "$name" > "$name.tmp" && mv "$name.tmp" "$name" 10 | done 11 | 12 | for value in Tutorial TutorialSection TutorialStep TutorialHighlighter 13 | do 14 | cat markdown/$value.md docs/components/$value.md > docs/components/$value.md.tmp 15 | mv docs/components/$value.md.tmp docs/components/$value.md 16 | done 17 | 18 | 19 | -------------------------------------------------------------------------------- /scripts/buildThemes.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | sass themes/vue.scss dist/themes/vue.css 4 | sass themes/azure.scss dist/themes/azure.css 5 | mkdir -p dist/code-themes 6 | cp src/style/code-theme/vue.css dist/code-themes 7 | cp node_modules/prismjs/themes/*.css dist/code-themes 8 | cp node_modules/prism-themes/themes/prism-*.css dist/code-themes/ 9 | 10 | cd dist/code-themes 11 | 12 | for name in prism-* 13 | do 14 | newname="$(echo "$name" | cut -c7-)" 15 | mv "$name" "$newname" 16 | done 17 | 18 | cd ../.. 19 | 20 | -------------------------------------------------------------------------------- /src/packages/Tutorial/index.js: -------------------------------------------------------------------------------- 1 | import component from './Tutorial.vue'; 2 | 3 | export function install(Vue) { 4 | if (install.installed) return; 5 | install.installed = true; 6 | Vue.component('Tutorial', component); 7 | } 8 | 9 | const plugin = { 10 | install 11 | }; 12 | 13 | let GlobalVue = null; 14 | if (typeof window !== 'undefined') { 15 | GlobalVue = window.Vue; 16 | } else if (typeof global !== 'undefined') { 17 | GlobalVue = global.Vue; 18 | } 19 | if (GlobalVue) { 20 | GlobalVue.use(plugin); 21 | } 22 | 23 | export default component; 24 | -------------------------------------------------------------------------------- /src/packages/TutorialStep/index.js: -------------------------------------------------------------------------------- 1 | import component from './TutorialStep.vue'; 2 | 3 | export function install(Vue) { 4 | if (install.installed) return; 5 | install.installed = true; 6 | Vue.component('TutorialStep', component); 7 | } 8 | 9 | const plugin = { 10 | install 11 | }; 12 | 13 | let GlobalVue = null; 14 | if (typeof window !== 'undefined') { 15 | GlobalVue = window.Vue; 16 | } else if (typeof global !== 'undefined') { 17 | GlobalVue = global.Vue; 18 | } 19 | if (GlobalVue) { 20 | GlobalVue.use(plugin); 21 | } 22 | 23 | export default component; 24 | -------------------------------------------------------------------------------- /src/packages/TutorialAside/index.js: -------------------------------------------------------------------------------- 1 | import component from './TutorialAside.vue'; 2 | 3 | export function install(Vue) { 4 | if (install.installed) return; 5 | install.installed = true; 6 | Vue.component('TutorialAside', component); 7 | } 8 | 9 | const plugin = { 10 | install 11 | }; 12 | 13 | let GlobalVue = null; 14 | if (typeof window !== 'undefined') { 15 | GlobalVue = window.Vue; 16 | } else if (typeof global !== 'undefined') { 17 | GlobalVue = global.Vue; 18 | } 19 | if (GlobalVue) { 20 | GlobalVue.use(plugin); 21 | } 22 | 23 | export default component; 24 | -------------------------------------------------------------------------------- /src/packages/TutorialSection/index.js: -------------------------------------------------------------------------------- 1 | import component from './TutorialSection.vue'; 2 | 3 | export function install(Vue) { 4 | if (install.installed) return; 5 | install.installed = true; 6 | Vue.component('TutorialSection', component); 7 | } 8 | 9 | const plugin = { 10 | install 11 | }; 12 | 13 | let GlobalVue = null; 14 | if (typeof window !== 'undefined') { 15 | GlobalVue = window.Vue; 16 | } else if (typeof global !== 'undefined') { 17 | GlobalVue = global.Vue; 18 | } 19 | if (GlobalVue) { 20 | GlobalVue.use(plugin); 21 | } 22 | 23 | export default component; 24 | -------------------------------------------------------------------------------- /src/packages/TutorialHighlighter/index.js: -------------------------------------------------------------------------------- 1 | import component from './TutorialHighlighter.vue'; 2 | 3 | export function install(Vue) { 4 | if (install.installed) return; 5 | install.installed = true; 6 | Vue.component('TutorialHighlighter', component); 7 | } 8 | 9 | const plugin = { 10 | install 11 | }; 12 | 13 | let GlobalVue = null; 14 | if (typeof window !== 'undefined') { 15 | GlobalVue = window.Vue; 16 | } else if (typeof global !== 'undefined') { 17 | GlobalVue = global.Vue; 18 | } 19 | if (GlobalVue) { 20 | GlobalVue.use(plugin); 21 | } 22 | 23 | export default component; 24 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Tutorial from './packages/Tutorial'; 2 | import TutorialSection from './packages/TutorialSection'; 3 | import TutorialStep from './packages/TutorialStep'; 4 | import TutorialHighlighter from './packages/TutorialHighlighter'; 5 | 6 | function install(Vue) { 7 | Vue.component('Tutorial', Tutorial); 8 | Vue.component('TutorialSection', TutorialSection); 9 | Vue.component('TutorialStep', TutorialStep); 10 | Vue.component('TutorialHighlighter', TutorialHighlighter); 11 | } 12 | 13 | export default { 14 | install 15 | }; 16 | 17 | export { 18 | Tutorial, 19 | TutorialSection, 20 | TutorialStep, 21 | TutorialHighlighter 22 | }; 23 | -------------------------------------------------------------------------------- /docs/components/Tutorial.md: -------------------------------------------------------------------------------- 1 | # Tutorial 2 | 3 | ``` 4 | ... 5 | ``` 6 | 7 | The tutorial component is the main component for VueTut. 8 | It represents a single tutorial made up of sections. 9 | The following slots are available to customize the overall tutorial. 10 | ## Slots 11 | 12 | 13 | |Name|Description|Default Slot Content| 14 | |---|---|---| 15 | |eyebrow|Category/summary/group of the tutorial that is placed above the title|-| 16 | |title|The name of the tutorial|-| 17 | |intro|Paragraph intro text under the title|-| 18 | |default|Should be a series of TutorialSection components|-| 19 | |footer|Content to put below the tutorial|-| 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/style/vue-tut.scss: -------------------------------------------------------------------------------- 1 | .vue-tut { 2 | background-color: #fff; 3 | color: #333; 4 | font-family: "Helvetica Neue", Arial, sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | text-align: left; 7 | 8 | .tutorial-header, .tutorial-footer { 9 | padding: 50px; 10 | 11 | h1 { 12 | font-size: 22px; 13 | margin-bottom: 10px; 14 | } 15 | 16 | h2 { 17 | font-size: 32px; 18 | margin-bottom: 25px; 19 | } 20 | 21 | p { 22 | line-height: 1.4; 23 | } 24 | } 25 | 26 | .tutorial-footer { 27 | min-height: 100vh; 28 | } 29 | 30 | .tutorial-footer:empty { 31 | display: none; 32 | } 33 | 34 | // On desktop, we hide the asides in the contents 35 | .step-contents .step-aside { 36 | display: none; 37 | } 38 | 39 | .step-assets .step-after { 40 | display: none; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /docs/components/TutorialSection.md: -------------------------------------------------------------------------------- 1 | # TutorialSection 2 | 3 | ``` 4 | 5 | ... 6 | 7 | ``` 8 | 9 | The tutorial-section component is a way to group a tutorial into sections - like chapters in a book. 10 | 11 | A tutorial needs at least one section, but you should try to have multiple to make the tutorial easier to consume for readers. 12 | 13 | The following slots are available to customize a section. 14 | ## Slots 15 | 16 | 17 | |Name|Description|Default Slot Content| 18 | |---|---|---| 19 | |name|The name of the section, displayed in a smaller font above the title|"Section #""| 20 | |title|The title of the section|-| 21 | |intro|The introduction paragraph for the section|-| 22 | |step|Add one or more `TutorialStep` components to this slot|-| 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /markdown/TutorialStep.md: -------------------------------------------------------------------------------- 1 | # TutorialStep 2 | 3 | ``` 4 | 5 | 6 | ... 7 | 8 | 9 | ``` 10 | 11 | The tutorial-step component represents a single step in your tutorial. 12 | 13 | ![Screen Shot 2020-08-25 at 11 19 12 AM](https://user-images.githubusercontent.com/611996/91201382-fe713800-e6c5-11ea-8725-03f1a3ca169d.png) 14 |
15 | _Pictured above: An example step_ 16 | 17 | On the left side of the screen, the current step's `default` slot content is shown in a highlighted box (1), with the number of the step within the section displayed above (2). 18 | 19 | On the right side of the screen, the current step's `aside` slot content is shown (3). This aside often contains a tutorial-highlighter component, but can hold anything. Using the html tag aside for this slot is recommended to get centered content. E.g. ``. 20 | 21 | The slot `after` can be used to display content below the step box, i.e. notes etc (4). 22 | -------------------------------------------------------------------------------- /themes/azure.scss: -------------------------------------------------------------------------------- 1 | .vue-tut { 2 | .tutorial-header, .tutorial-footer { 3 | background-color: #000; 4 | color: #fff; 5 | 6 | p { 7 | font-size: 17px; 8 | } 9 | 10 | h1, h2 { 11 | letter-spacing: 0.6px; 12 | font-weight: 400; 13 | } 14 | } 15 | 16 | .step { 17 | border-radius: 10px; 18 | } 19 | 20 | .step p { 21 | font-size: 15px; 22 | } 23 | 24 | .sections > section > header > h1 { 25 | font-weight: 400; 26 | } 27 | 28 | .sections > section > header > h2 { 29 | font-weight: 400; 30 | } 31 | 32 | .prism-editor-wrapper .prism-editor__line-number.highlight-line { 33 | border-left: 5px solid #0173fe; 34 | background: #0173fe38; 35 | } 36 | 37 | .prism-editor-wrapper .prism-editor__line-number.highlight-line:after { 38 | background: #0173fe38; 39 | } 40 | 41 | .step-intersected .step { 42 | border-left: 10px solid #0173fe; 43 | } 44 | 45 | .step-after { 46 | background: #e1daf1; 47 | border-radius: 10px; 48 | padding: 20px 15px; 49 | font-size: 15px; 50 | line-height: 1.3; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /dist/themes/azure.css: -------------------------------------------------------------------------------- 1 | .vue-tut .tutorial-header, .vue-tut .tutorial-footer { 2 | background-color: #000; 3 | color: #fff; 4 | } 5 | .vue-tut .tutorial-header p, .vue-tut .tutorial-footer p { 6 | font-size: 17px; 7 | } 8 | .vue-tut .tutorial-header h1, .vue-tut .tutorial-header h2, .vue-tut .tutorial-footer h1, .vue-tut .tutorial-footer h2 { 9 | letter-spacing: 0.6px; 10 | font-weight: 400; 11 | } 12 | .vue-tut .step { 13 | border-radius: 10px; 14 | } 15 | .vue-tut .step p { 16 | font-size: 15px; 17 | } 18 | .vue-tut .sections > section > header > h1 { 19 | font-weight: 400; 20 | } 21 | .vue-tut .sections > section > header > h2 { 22 | font-weight: 400; 23 | } 24 | .vue-tut .prism-editor-wrapper .prism-editor__line-number.highlight-line { 25 | border-left: 5px solid #0173fe; 26 | background: #0173fe38; 27 | } 28 | .vue-tut .prism-editor-wrapper .prism-editor__line-number.highlight-line:after { 29 | background: #0173fe38; 30 | } 31 | .vue-tut .step-intersected .step { 32 | border-left: 10px solid #0173fe; 33 | } 34 | .vue-tut .step-after { 35 | background: #e1daf1; 36 | border-radius: 10px; 37 | padding: 20px 15px; 38 | font-size: 15px; 39 | line-height: 1.3; 40 | } 41 | 42 | /*# sourceMappingURL=azure.css.map */ 43 | -------------------------------------------------------------------------------- /docs/components/TutorialStep.md: -------------------------------------------------------------------------------- 1 | # TutorialStep 2 | 3 | ``` 4 | 5 | 6 | ... 7 | 8 | 9 | ``` 10 | 11 | The tutorial-step component represents a single step in your tutorial. 12 | 13 | ![Screen Shot 2020-08-25 at 11 19 12 AM](https://user-images.githubusercontent.com/611996/91201382-fe713800-e6c5-11ea-8725-03f1a3ca169d.png) 14 |
15 | _Pictured above: An example step_ 16 | 17 | On the left side of the screen, the current step's `default` slot content is shown in a highlighted box (1), with the number of the step within the section displayed above (2). 18 | 19 | On the right side of the screen, the current step's `aside` slot content is shown (3). This aside often contains a tutorial-highlighter component, but can hold anything. Using the html tag aside for this slot is recommended to get centered content. E.g. ``. 20 | 21 | The slot `after` can be used to display content below the step box, i.e. notes etc (4). 22 | ## Slots 23 | 24 | 25 | |Name|Description|Default Slot Content| 26 | |---|---|---| 27 | |name|The name of the step|"Step #"| 28 | |default|The content of the step box|-| 29 | |aside|The content to put aside the step box (or below on mobile)|-| 30 | |after|Content to display after and outside the step box|-| 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /themes/vue.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --tut-color-accent: #42b983; 3 | --tut-color-body: #304455; 4 | --tut-color-headers: #273849; 5 | --tut-color-gray-dark: #4f5959; 6 | } 7 | 8 | .vue-tut { 9 | background-color: #fff; 10 | color: var(--tut-color-body); 11 | font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; 12 | font-size: 16px; 13 | 14 | a, a:visited { 15 | color: var(--tut-color-accent); 16 | } 17 | 18 | h1, h2, h3, h4 { 19 | font-weight: 600; 20 | } 21 | 22 | .sections > section > header > h1 { 23 | font-weight: 600; 24 | } 25 | 26 | .sections > section > header > h2 { 27 | font-weight: 600; 28 | border-bottom: 1px solid #ddd; 29 | padding-bottom: 17px; 30 | } 31 | 32 | h1, h2, h3, h4, h5, h6 { 33 | color: var(--tut-color-headers); 34 | } 35 | 36 | h1 { 37 | color: var(--tut-color-gray-dark); 38 | } 39 | 40 | p { 41 | color: var(--tut-color-body); 42 | line-height: 1.4; 43 | } 44 | 45 | .step { 46 | background-color: #f8f8f8; 47 | } 48 | 49 | .step hr { 50 | border-color: #ddd; 51 | } 52 | 53 | .prism-editor-wrapper .prism-editor__line-number.highlight-line { 54 | border-left: 5px solid var(--tut-color-accent); 55 | background: #42b9832a; 56 | } 57 | 58 | .prism-editor-wrapper .prism-editor__line-number.highlight-line:after { 59 | background: #42b9832a; 60 | } 61 | 62 | .step-intersected .step { 63 | border-left: 10px solid var(--tut-color-accent); 64 | } 65 | } -------------------------------------------------------------------------------- /dist/themes/vue.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --tut-color-accent: #42b983; 3 | --tut-color-body: #304455; 4 | --tut-color-headers: #273849; 5 | --tut-color-gray-dark: #4f5959; 6 | } 7 | 8 | .vue-tut { 9 | background-color: #fff; 10 | color: var(--tut-color-body); 11 | font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; 12 | font-size: 16px; 13 | } 14 | .vue-tut a, .vue-tut a:visited { 15 | color: var(--tut-color-accent); 16 | } 17 | .vue-tut h1, .vue-tut h2, .vue-tut h3, .vue-tut h4 { 18 | font-weight: 600; 19 | } 20 | .vue-tut .sections > section > header > h1 { 21 | font-weight: 600; 22 | } 23 | .vue-tut .sections > section > header > h2 { 24 | font-weight: 600; 25 | border-bottom: 1px solid #ddd; 26 | padding-bottom: 17px; 27 | } 28 | .vue-tut h1, .vue-tut h2, .vue-tut h3, .vue-tut h4, .vue-tut h5, .vue-tut h6 { 29 | color: var(--tut-color-headers); 30 | } 31 | .vue-tut h1 { 32 | color: var(--tut-color-gray-dark); 33 | } 34 | .vue-tut p { 35 | color: var(--tut-color-body); 36 | line-height: 1.4; 37 | } 38 | .vue-tut .step { 39 | background-color: #f8f8f8; 40 | } 41 | .vue-tut .step hr { 42 | border-color: #ddd; 43 | } 44 | .vue-tut .prism-editor-wrapper .prism-editor__line-number.highlight-line { 45 | border-left: 5px solid var(--tut-color-accent); 46 | background: #42b9832a; 47 | } 48 | .vue-tut .prism-editor-wrapper .prism-editor__line-number.highlight-line:after { 49 | background: #42b9832a; 50 | } 51 | .vue-tut .step-intersected .step { 52 | border-left: 10px solid var(--tut-color-accent); 53 | } 54 | 55 | /*# sourceMappingURL=vue.css.map */ 56 | -------------------------------------------------------------------------------- /src/packages/TutorialStep/TutorialStep.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 65 | -------------------------------------------------------------------------------- /src/packages/Tutorial/Tutorial.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 64 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | VueTut 5 | 6 | 7 | 8 | 9 | 54 | 55 | 56 |
57 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /dist/code-themes/vue.css: -------------------------------------------------------------------------------- 1 | pre { 2 | font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; 3 | color: #525252; 4 | background: #f8f8f8; 5 | } 6 | 7 | .token.selector, 8 | .token.tag, 9 | .token.tag .token.title, 10 | .token.change, 11 | .token.winutils, 12 | .token.flow, 13 | .token.tex .token.special { 14 | color: #2973b7; 15 | } 16 | 17 | .token.symbol, 18 | .token.symbol .token.string, 19 | .token.attr-value, 20 | .token.value, 21 | .token.regex, 22 | .token.string, 23 | .token.subst, 24 | .token.haskell .token.type, 25 | .token.preprocessor, 26 | .token.ruby .token.class .token.parent, 27 | .token.built_in, 28 | .token.sql .token.aggregate, 29 | .token.django .token.template_tag, 30 | .token.django .token.variable, 31 | .token.smalltalk .token.class, 32 | .token.javadoc, 33 | .token.django .token.filter .token.argument, 34 | .token.smalltalk .token.localvars, 35 | .token.smalltalk .token.array, 36 | .token.attr_selector, 37 | .token.pseudo, 38 | .token.addition, 39 | .token.stream, 40 | .token.envvar, 41 | .token.apache .token.tag, 42 | .token.apache .token.cbracket, 43 | .token.tex .token.command, 44 | .token.prompt { 45 | color: #42b983; 46 | } 47 | .token.function .token.keyword, 48 | .token.constant { 49 | color: #0092db; 50 | } 51 | 52 | .token.property, 53 | .token.keyword, 54 | .token.attribute { 55 | color: #d63200; 56 | } 57 | .token.number, 58 | .token.literal { 59 | color: #a32eff; 60 | } 61 | .token.class .token.title { 62 | color: #fff; 63 | } 64 | .token.title { 65 | color: #a6e22e; 66 | } 67 | .token.tag .token.value, 68 | .token.comment, 69 | .token.java .token.annotation, 70 | .token.python .token.decorator, 71 | .token.template_comment, 72 | .token.pi, 73 | .token.doctype, 74 | .token.deletion, 75 | .token.shebang, 76 | .token.apache .token.sqbracket, 77 | .token.tex .token.formula { 78 | color: #707070; 79 | } 80 | 81 | .tutorial-highlighter-title { 82 | color: #676767; 83 | } 84 | 85 | -------------------------------------------------------------------------------- /src/style/code-theme/vue.css: -------------------------------------------------------------------------------- 1 | pre { 2 | font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; 3 | color: #525252; 4 | background: #f8f8f8; 5 | } 6 | 7 | .token.selector, 8 | .token.tag, 9 | .token.tag .token.title, 10 | .token.change, 11 | .token.winutils, 12 | .token.flow, 13 | .token.tex .token.special { 14 | color: #2973b7; 15 | } 16 | 17 | .token.symbol, 18 | .token.symbol .token.string, 19 | .token.attr-value, 20 | .token.value, 21 | .token.regex, 22 | .token.string, 23 | .token.subst, 24 | .token.haskell .token.type, 25 | .token.preprocessor, 26 | .token.ruby .token.class .token.parent, 27 | .token.built_in, 28 | .token.sql .token.aggregate, 29 | .token.django .token.template_tag, 30 | .token.django .token.variable, 31 | .token.smalltalk .token.class, 32 | .token.javadoc, 33 | .token.django .token.filter .token.argument, 34 | .token.smalltalk .token.localvars, 35 | .token.smalltalk .token.array, 36 | .token.attr_selector, 37 | .token.pseudo, 38 | .token.addition, 39 | .token.stream, 40 | .token.envvar, 41 | .token.apache .token.tag, 42 | .token.apache .token.cbracket, 43 | .token.tex .token.command, 44 | .token.prompt { 45 | color: #42b983; 46 | } 47 | .token.function .token.keyword, 48 | .token.constant { 49 | color: #0092db; 50 | } 51 | 52 | .token.property, 53 | .token.keyword, 54 | .token.attribute { 55 | color: #d63200; 56 | } 57 | .token.number, 58 | .token.literal { 59 | color: #a32eff; 60 | } 61 | .token.class .token.title { 62 | color: #fff; 63 | } 64 | .token.title { 65 | color: #a6e22e; 66 | } 67 | .token.tag .token.value, 68 | .token.comment, 69 | .token.java .token.annotation, 70 | .token.python .token.decorator, 71 | .token.template_comment, 72 | .token.pi, 73 | .token.doctype, 74 | .token.deletion, 75 | .token.shebang, 76 | .token.apache .token.sqbracket, 77 | .token.tex .token.formula { 78 | color: #707070; 79 | } 80 | 81 | .tutorial-highlighter-title { 82 | color: #676767; 83 | } 84 | 85 | -------------------------------------------------------------------------------- /src/style/prism-editor.scss: -------------------------------------------------------------------------------- 1 | .prism-editor-wrapper { 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | align-items: flex-start; 6 | overflow: auto; 7 | tab-size: 1.5em; 8 | -moz-tab-size: 1.5em; 9 | 10 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 11 | .prism-editor__textarea { 12 | color: transparent !important; 13 | } 14 | .prism-editor__textarea::selection { 15 | background-color: #accef7 !important; 16 | color: transparent !important; 17 | } 18 | } 19 | 20 | .prism-editor__container { 21 | position: relative; 22 | text-align: left; 23 | box-sizing: border-box; 24 | padding: 0; 25 | overflow: hidden; 26 | width: 100%; 27 | } 28 | 29 | .prism-editor__line-numbers { 30 | height: 100%; 31 | overflow: hidden; 32 | flex-shrink: 0; 33 | padding-top: 4px; 34 | margin-top: 0; 35 | margin-right: 10px; 36 | } 37 | .prism-editor__line-number { 38 | /* padding: 0 3px 0 5px; */ 39 | text-align: right; 40 | white-space: nowrap; 41 | } 42 | 43 | .prism-editor__textarea { 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | height: 100%; 48 | width: 100%; 49 | resize: none; 50 | color: inherit; 51 | overflow: hidden; 52 | -moz-osx-font-smoothing: grayscale; 53 | -webkit-font-smoothing: antialiased; 54 | -webkit-text-fill-color: transparent; 55 | } 56 | 57 | .prism-editor__textarea, 58 | .prism-editor__editor { 59 | margin: 0; 60 | border: 0; 61 | box-sizing: inherit; 62 | display: inherit; 63 | font-family: inherit; 64 | font-size: inherit; 65 | font-style: inherit; 66 | font-variant-ligatures: inherit; 67 | font-weight: inherit; 68 | letter-spacing: inherit; 69 | line-height: inherit; 70 | tab-size: inherit; 71 | text-indent: inherit; 72 | text-rendering: inherit; 73 | text-transform: inherit; 74 | white-space: pre; 75 | word-wrap: keep-all; 76 | overflow-wrap: break-word; 77 | padding: 0; 78 | } 79 | 80 | .prism-editor__textarea--empty { 81 | -webkit-text-fill-color: inherit !important; 82 | } 83 | 84 | .prism-editor__editor { 85 | position: relative; 86 | pointer-events: auto; 87 | overflow-x: auto; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /dist/code-themes/tomorrow.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML 3 | * Based on https://github.com/chriskempson/tomorrow-theme 4 | * @author Rose Pritchard 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: #ccc; 10 | background: none; 11 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 12 | font-size: 1em; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | word-wrap: normal; 18 | line-height: 1.5; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | 29 | } 30 | 31 | /* Code blocks */ 32 | pre[class*="language-"] { 33 | padding: 1em; 34 | margin: .5em 0; 35 | overflow: auto; 36 | } 37 | 38 | :not(pre) > code[class*="language-"], 39 | pre[class*="language-"] { 40 | background: #2d2d2d; 41 | } 42 | 43 | /* Inline code */ 44 | :not(pre) > code[class*="language-"] { 45 | padding: .1em; 46 | border-radius: .3em; 47 | white-space: normal; 48 | } 49 | 50 | .token.comment, 51 | .token.block-comment, 52 | .token.prolog, 53 | .token.doctype, 54 | .token.cdata { 55 | color: #999; 56 | } 57 | 58 | .token.punctuation { 59 | color: #ccc; 60 | } 61 | 62 | .token.tag, 63 | .token.attr-name, 64 | .token.namespace, 65 | .token.deleted { 66 | color: #e2777a; 67 | } 68 | 69 | .token.function-name { 70 | color: #6196cc; 71 | } 72 | 73 | .token.boolean, 74 | .token.number, 75 | .token.function { 76 | color: #f08d49; 77 | } 78 | 79 | .token.property, 80 | .token.class-name, 81 | .token.constant, 82 | .token.symbol { 83 | color: #f8c555; 84 | } 85 | 86 | .token.selector, 87 | .token.important, 88 | .token.atrule, 89 | .token.keyword, 90 | .token.builtin { 91 | color: #cc99cd; 92 | } 93 | 94 | .token.string, 95 | .token.char, 96 | .token.attr-value, 97 | .token.regex, 98 | .token.variable { 99 | color: #7ec699; 100 | } 101 | 102 | .token.operator, 103 | .token.entity, 104 | .token.url { 105 | color: #67cdcc; 106 | } 107 | 108 | .token.important, 109 | .token.bold { 110 | font-weight: bold; 111 | } 112 | .token.italic { 113 | font-style: italic; 114 | } 115 | 116 | .token.entity { 117 | cursor: help; 118 | } 119 | 120 | .token.inserted { 121 | color: green; 122 | } 123 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | mocha: true 6 | }, 7 | globals: { 8 | BigInt: true, 9 | BigUint64Array: true 10 | }, 11 | extends: [ 12 | 'plugin:vue/recommended', 13 | '@vue/airbnb' 14 | ], 15 | parserOptions: { 16 | parser: 'babel-eslint' 17 | }, 18 | rules: { 19 | 'no-underscore-dangle': 'off', 20 | 'no-extend-native': 'off', 21 | 'no-empty': 'off', 22 | radix: 'off', 23 | 'no-cond-assign': 'off', 24 | 'no-plusplus': 'off', 25 | 'default-case': 'off', 26 | 'no-use-before-define': 'off', 27 | 'no-labels': 'off', 28 | 'no-restricted-syntax': 'off', 29 | 'consistent-return': 'off', 30 | 'func-names': 'off', 31 | 'arrow-parens': 'off', 32 | camelcase: 'off', 33 | 'no-console': 'off', 34 | 'no-continue': 'off', 35 | 'prefer-const': 'off', 36 | 'comma-dangle': [ 37 | 'error', { 38 | arrays: 'never', 39 | objects: 'never', 40 | imports: 'never', 41 | exports: 'never', 42 | functions: 'ignore' 43 | } 44 | ], 45 | 'prefer-destructuring': 'off', 46 | 'space-before-function-paren': 'off', 47 | 'no-new': 'off', 48 | 'max-len': ['error', { 49 | ignoreStrings: true, 50 | ignorePattern: ' code[class*="language-"], 38 | pre[class*="language-"] { 39 | background: #282a36; 40 | } 41 | 42 | /* Inline code */ 43 | :not(pre) > code[class*="language-"] { 44 | padding: .1em; 45 | border-radius: .3em; 46 | white-space: normal; 47 | } 48 | 49 | .token.comment, 50 | .token.prolog, 51 | .token.doctype, 52 | .token.cdata { 53 | color: #6272a4; 54 | } 55 | 56 | .token.punctuation { 57 | color: #f8f8f2; 58 | } 59 | 60 | .namespace { 61 | opacity: .7; 62 | } 63 | 64 | .token.property, 65 | .token.tag, 66 | .token.constant, 67 | .token.symbol, 68 | .token.deleted { 69 | color: #ff79c6; 70 | } 71 | 72 | .token.boolean, 73 | .token.number { 74 | color: #bd93f9; 75 | } 76 | 77 | .token.selector, 78 | .token.attr-name, 79 | .token.string, 80 | .token.char, 81 | .token.builtin, 82 | .token.inserted { 83 | color: #50fa7b; 84 | } 85 | 86 | .token.operator, 87 | .token.entity, 88 | .token.url, 89 | .language-css .token.string, 90 | .style .token.string, 91 | .token.variable { 92 | color: #f8f8f2; 93 | } 94 | 95 | .token.atrule, 96 | .token.attr-value, 97 | .token.function, 98 | .token.class-name { 99 | color: #f1fa8c; 100 | } 101 | 102 | .token.keyword { 103 | color: #8be9fd; 104 | } 105 | 106 | .token.regex, 107 | .token.important { 108 | color: #ffb86c; 109 | } 110 | 111 | .token.important, 112 | .token.bold { 113 | font-weight: bold; 114 | } 115 | 116 | .token.italic { 117 | font-style: italic; 118 | } 119 | 120 | .token.entity { 121 | cursor: help; 122 | } 123 | -------------------------------------------------------------------------------- /dist/code-themes/okaidia.css: -------------------------------------------------------------------------------- 1 | /** 2 | * okaidia theme for JavaScript, CSS and HTML 3 | * Loosely based on Monokai textmate theme by http://www.monokai.nl/ 4 | * @author ocodia 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: #f8f8f2; 10 | background: none; 11 | text-shadow: 0 1px rgba(0, 0, 0, 0.3); 12 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 13 | font-size: 1em; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | /* Code blocks */ 32 | pre[class*="language-"] { 33 | padding: 1em; 34 | margin: .5em 0; 35 | overflow: auto; 36 | border-radius: 0.3em; 37 | } 38 | 39 | :not(pre) > code[class*="language-"], 40 | pre[class*="language-"] { 41 | background: #272822; 42 | } 43 | 44 | /* Inline code */ 45 | :not(pre) > code[class*="language-"] { 46 | padding: .1em; 47 | border-radius: .3em; 48 | white-space: normal; 49 | } 50 | 51 | .token.comment, 52 | .token.prolog, 53 | .token.doctype, 54 | .token.cdata { 55 | color: #8292a2; 56 | } 57 | 58 | .token.punctuation { 59 | color: #f8f8f2; 60 | } 61 | 62 | .token.namespace { 63 | opacity: .7; 64 | } 65 | 66 | .token.property, 67 | .token.tag, 68 | .token.constant, 69 | .token.symbol, 70 | .token.deleted { 71 | color: #f92672; 72 | } 73 | 74 | .token.boolean, 75 | .token.number { 76 | color: #ae81ff; 77 | } 78 | 79 | .token.selector, 80 | .token.attr-name, 81 | .token.string, 82 | .token.char, 83 | .token.builtin, 84 | .token.inserted { 85 | color: #a6e22e; 86 | } 87 | 88 | .token.operator, 89 | .token.entity, 90 | .token.url, 91 | .language-css .token.string, 92 | .style .token.string, 93 | .token.variable { 94 | color: #f8f8f2; 95 | } 96 | 97 | .token.atrule, 98 | .token.attr-value, 99 | .token.function, 100 | .token.class-name { 101 | color: #e6db74; 102 | } 103 | 104 | .token.keyword { 105 | color: #66d9ef; 106 | } 107 | 108 | .token.regex, 109 | .token.important { 110 | color: #fd971f; 111 | } 112 | 113 | .token.important, 114 | .token.bold { 115 | font-weight: bold; 116 | } 117 | .token.italic { 118 | font-style: italic; 119 | } 120 | 121 | .token.entity { 122 | cursor: help; 123 | } 124 | -------------------------------------------------------------------------------- /dist/code-themes/nord.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Nord Theme Originally by Arctic Ice Studio 3 | * https://nordtheme.com 4 | * 5 | * Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos) 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: #f8f8f2; 11 | background: none; 12 | font-family: "Fira Code", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | word-wrap: normal; 18 | line-height: 1.5; 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | -webkit-hyphens: none; 23 | -moz-hyphens: none; 24 | -ms-hyphens: none; 25 | hyphens: none; 26 | } 27 | 28 | /* Code blocks */ 29 | pre[class*="language-"] { 30 | padding: 1em; 31 | margin: .5em 0; 32 | overflow: auto; 33 | border-radius: 0.3em; 34 | } 35 | 36 | :not(pre) > code[class*="language-"], 37 | pre[class*="language-"] { 38 | background: #2E3440; 39 | } 40 | 41 | /* Inline code */ 42 | :not(pre) > code[class*="language-"] { 43 | padding: .1em; 44 | border-radius: .3em; 45 | white-space: normal; 46 | } 47 | 48 | .token.comment, 49 | .token.prolog, 50 | .token.doctype, 51 | .token.cdata { 52 | color: #636f88; 53 | } 54 | 55 | .token.punctuation { 56 | color: #81A1C1; 57 | } 58 | 59 | .namespace { 60 | opacity: .7; 61 | } 62 | 63 | .token.property, 64 | .token.tag, 65 | .token.constant, 66 | .token.symbol, 67 | .token.deleted { 68 | color: #81A1C1; 69 | } 70 | 71 | .token.number { 72 | color: #B48EAD; 73 | } 74 | 75 | .token.boolean { 76 | color: #81A1C1; 77 | } 78 | 79 | .token.selector, 80 | .token.attr-name, 81 | .token.string, 82 | .token.char, 83 | .token.builtin, 84 | .token.inserted { 85 | color: #A3BE8C; 86 | } 87 | 88 | .token.operator, 89 | .token.entity, 90 | .token.url, 91 | .language-css .token.string, 92 | .style .token.string, 93 | .token.variable { 94 | color: #81A1C1; 95 | } 96 | 97 | .token.atrule, 98 | .token.attr-value, 99 | .token.function, 100 | .token.class-name { 101 | color: #88C0D0; 102 | } 103 | 104 | .token.keyword { 105 | color: #81A1C1; 106 | } 107 | 108 | .token.regex, 109 | .token.important { 110 | color: #EBCB8B; 111 | } 112 | 113 | .token.important, 114 | .token.bold { 115 | font-weight: bold; 116 | } 117 | 118 | .token.italic { 119 | font-style: italic; 120 | } 121 | 122 | .token.entity { 123 | cursor: help; 124 | } 125 | -------------------------------------------------------------------------------- /src/style/vue-tut-step.scss: -------------------------------------------------------------------------------- 1 | .vue-tut { 2 | .steps { 3 | padding-top: 50px; 4 | } 5 | 6 | // 7 | // A step 8 | // 9 | 10 | // .step-wrapper:not(:last-child) { 11 | // margin-bottom: 100px; 12 | // } 13 | 14 | .step-wrapper { 15 | padding-bottom: 140px; 16 | } 17 | 18 | .step-assets .step-wrapper { 19 | padding-bottom: 0; 20 | } 21 | 22 | .step { 23 | border-left: 10px solid transparent; 24 | background-color: #f3f1f1; 25 | } 26 | 27 | .step-after { 28 | padding: 0 15px; 29 | } 30 | 31 | .step-intersected .step { 32 | border-left: 10px solid gray; 33 | } 34 | 35 | .step-intersected ~ .step-intersected .step { 36 | border-left: 10px solid transparent; 37 | } 38 | 39 | .step-contents { 40 | width: 39%; 41 | margin-right: 4%; 42 | margin-top: 140px; 43 | margin-bottom: 94vh; 44 | } 45 | 46 | .step-aside img { 47 | object-fit: contain; 48 | max-width: 100%; 49 | max-height: 100%; 50 | } 51 | 52 | .step-label { 53 | display: block; 54 | font-weight: 600; 55 | letter-spacing: 0.1px; 56 | } 57 | 58 | .step hr { 59 | border-color: #ddd; 60 | margin: 16px 0 15px 0; 61 | } 62 | 63 | .step p { 64 | line-height: 1.3; 65 | } 66 | 67 | // 68 | // Assets sidebar 69 | // 70 | 71 | .step-assets { 72 | margin-right: -50px; 73 | top: 0; 74 | max-width: 920px; 75 | width: calc(50vw + 8.33333%) !important; 76 | height: calc(100vh); 77 | max-height: 100%; 78 | overflow-y: auto; 79 | position: sticky; 80 | } 81 | 82 | .step-assets .step { 83 | display: none; 84 | } 85 | 86 | .step-assets .step-wrapper { 87 | height: 100%; 88 | 89 | .step-container { 90 | height: 100%; 91 | 92 | .step-aside { 93 | height: 100%; 94 | 95 | aside { 96 | height: 100%; 97 | display: flex; 98 | justify-content: center; 99 | align-items: center; 100 | } 101 | } 102 | } 103 | } 104 | 105 | .step-after { 106 | margin-top: 40px; 107 | } 108 | 109 | .step-after:empty { 110 | display: none; 111 | } 112 | 113 | .step-assets-inner { 114 | position: relative; 115 | height: 100%; 116 | } 117 | 118 | .step-assets-inner .asset-aside-wrapper { 119 | position: absolute; 120 | top: 0; 121 | left: 0; 122 | right: 0; 123 | bottom: 0; 124 | } 125 | } -------------------------------------------------------------------------------- /src/style/vue-tut-mobile.scss: -------------------------------------------------------------------------------- 1 | main.vue-tut { 2 | @media only screen 3 | and (max-device-width: 600px) 4 | and (-webkit-min-device-pixel-ratio: 2) 5 | and (orientation: landscape) { 6 | .prism-editor-wrapper { 7 | .prism-editor__line-numbers { 8 | .prism-editor__line-number { 9 | font-size: 16px !important; 10 | line-height: 27px !important; 11 | &:after { 12 | height: 27px !important; 13 | } 14 | } 15 | } 16 | 17 | .prism-editor__editor { 18 | font-size: 18px !important; 19 | line-height: 27px !important; 20 | } 21 | 22 | .token { 23 | font-size: 10px !important; 24 | line-height: 6px !important; 25 | } 26 | } 27 | } 28 | 29 | @media only screen 30 | and (max-device-width: 600px) 31 | and (-webkit-min-device-pixel-ratio: 2) 32 | and (orientation: portrait) { 33 | .prism-editor-wrapper { 34 | .prism-editor__line-numbers { 35 | .prism-editor__line-number { 36 | line-height: 21px !important; 37 | height: 21px !important; 38 | } 39 | } 40 | } 41 | } 42 | 43 | @media all and (max-width: 980px) { 44 | .tutorial-header { 45 | padding: 15px; 46 | margin-bottom: 5px; 47 | 48 | > h1.m-s-sm { 49 | margin-bottom: 5px; 50 | } 51 | 52 | > h2.m-s-xl { 53 | margin-bottom: 15px; 54 | } 55 | } 56 | 57 | .sections .tutorial-section { 58 | margin: 15px; 59 | } 60 | 61 | .step { 62 | margin-top: 40px; 63 | margin-bottom: 20px; 64 | } 65 | 66 | .steps { 67 | padding-top: 0; 68 | } 69 | 70 | .steps > .step-contents { 71 | width: 100%; 72 | margin: 0; 73 | } 74 | 75 | .step-contents .step-aside { 76 | display: block; 77 | 78 | aside { 79 | display: flex; 80 | align-items: center; 81 | justify-content: center; 82 | } 83 | 84 | pre { 85 | word-wrap: inherit; 86 | white-space: pre; 87 | } 88 | 89 | .highlight-line:after { 90 | width: calc(100vw - 62px) !important; 91 | } 92 | } 93 | 94 | .step-assets { 95 | display: none; 96 | } 97 | 98 | .step-wrapper { 99 | padding-bottom: 70px; 100 | } 101 | 102 | .step-wrapper:first-child .step { 103 | margin-top: 40px; 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /src/style/vue-tut-highlighter.scss: -------------------------------------------------------------------------------- 1 | .vue-tut { 2 | .tutorial-highlighter { 3 | font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; 4 | font-size: 14px; 5 | line-height: 1.5; 6 | padding: 10px 5px 5px 0; 7 | 8 | 9 | cursor: text; 10 | } 11 | 12 | .tutorial-highlighter-title { 13 | padding: 13px 15px 0px 62px; 14 | font-size: 18px; 15 | font-weight: bold; 16 | height: 36px; 17 | } 18 | 19 | .prism-editor-wrapper .prism-editor__container { 20 | overflow-x: auto; 21 | } 22 | 23 | .prism-editor__textarea:focus { 24 | outline: none; 25 | } 26 | 27 | .prism-editor__editor { 28 | white-space: pre; 29 | word-wrap: inherit; 30 | } 31 | 32 | .prism-editor-wrapper { 33 | height: calc(100% - 36px); 34 | font-size: 14px !important; 35 | 36 | * { 37 | font-size: 14px !important; 38 | } 39 | } 40 | 41 | .prism-editor__line-numbers { 42 | user-select: none; 43 | cursor: default; 44 | margin-right: 20px; 45 | min-width: 42px; 46 | background: transparent !important; 47 | overflow: visible; 48 | } 49 | 50 | .prism-editor__line-number { 51 | border-left: 5px solid transparent; 52 | padding-left: 10px; 53 | position: relative; 54 | } 55 | 56 | .prism-editor__line-number.highlight-line { 57 | border-left: 5px solid gray; 58 | background: rgba(128, 128, 128, 0.384); 59 | } 60 | 61 | .prism-editor__line-number.highlight-line:after { 62 | content: ""; 63 | height: 21px; 64 | background: rgba(128, 128, 128, 0.384); 65 | pointer-events: none; 66 | position: absolute; 67 | z-index: 1; 68 | max-width: 920px; 69 | width: calc(50vw + 58px) !important; 70 | } 71 | 72 | textarea { 73 | display: none !important; 74 | } 75 | 76 | pre > span { 77 | position: relative; 78 | z-index: 1; 79 | } 80 | 81 | .no-line-numbers { 82 | .prism-editor__line-numbers { 83 | width: 15px; 84 | min-width: 0; 85 | padding: 0; 86 | margin: 0; 87 | 88 | .prism-editor__line-number { 89 | width: 15px; 90 | padding-left: 0 !important; 91 | color: transparent !important; 92 | } 93 | } 94 | 95 | .prism-editor__line-number.highlight-line:after { 96 | width: calc(50vw + 64px) !important; 97 | } 98 | 99 | .tutorial-highlighter-title { 100 | padding-left: 17px; 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /dist/code-themes/hopscotch.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Fira+Mono); 2 | /* 3 | * Hopscotch 4 | * by Jan T. Sott 5 | * https://github.com/idleberg/Hopscotch 6 | * 7 | * This work is licensed under the Creative Commons CC0 1.0 Universal License 8 | */ 9 | 10 | code[class*="language-"], 11 | pre[class*="language-"] { 12 | font-family: "Fira Mono", Menlo, Monaco, "Lucida Console", "Courier New", Courier, monospace; 13 | font-size: 16px; 14 | line-height: 1.375; 15 | direction: ltr; 16 | text-align: left; 17 | word-spacing: normal; 18 | 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | white-space: pre; 28 | white-space: pre-wrap; 29 | word-break: break-all; 30 | word-wrap: break-word; 31 | background: #322931; 32 | color: #b9b5b8; 33 | } 34 | 35 | pre > code[class*="language-"] { 36 | font-size: 1em; 37 | } 38 | 39 | /* Code blocks */ 40 | pre[class*="language-"] { 41 | padding: 1em; 42 | margin: .5em 0; 43 | overflow: auto; 44 | } 45 | 46 | /* Inline code */ 47 | :not(pre) > code[class*="language-"] { 48 | padding: .1em; 49 | border-radius: .3em; 50 | } 51 | 52 | .token.comment, 53 | .token.prolog, 54 | .token.doctype, 55 | .token.cdata { 56 | color: #797379; 57 | } 58 | 59 | .token.punctuation { 60 | color: #b9b5b8; 61 | } 62 | 63 | .namespace { 64 | opacity: .7; 65 | } 66 | 67 | .token.null, 68 | .token.operator, 69 | .token.boolean, 70 | .token.number { 71 | color: #fd8b19; 72 | } 73 | 74 | .token.property { 75 | color: #fdcc59; 76 | } 77 | 78 | .token.tag { 79 | color: #1290bf; 80 | } 81 | 82 | .token.string { 83 | color: #149b93; 84 | } 85 | 86 | .token.selector { 87 | color: #c85e7c; 88 | } 89 | 90 | .token.attr-name { 91 | color: #fd8b19; 92 | } 93 | 94 | .token.entity, 95 | .token.url, 96 | .language-css .token.string, 97 | .style .token.string { 98 | color: #149b93; 99 | } 100 | 101 | .token.attr-value, 102 | .token.keyword, 103 | .token.control, 104 | .token.directive, 105 | .token.unit { 106 | color: #8fc13e; 107 | } 108 | 109 | .token.statement, 110 | .token.regex, 111 | .token.atrule { 112 | color: #149b93; 113 | } 114 | 115 | .token.placeholder, 116 | .token.variable { 117 | color: #1290bf; 118 | } 119 | 120 | .token.important { 121 | color: #dd464c; 122 | font-weight: bold; 123 | } 124 | 125 | .token.entity { 126 | cursor: help; 127 | } 128 | 129 | pre > code.highlight { 130 | outline: .4em solid red; 131 | outline-offset: .4em; 132 | } 133 | -------------------------------------------------------------------------------- /dist/code-themes/atom-dark.css: -------------------------------------------------------------------------------- 1 | /** 2 | * atom-dark theme for `prism.js` 3 | * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax 4 | * @author Joe Gibson (@gibsjose) 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: #c5c8c6; 10 | text-shadow: 0 1px rgba(0, 0, 0, 0.3); 11 | font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | line-height: 1.5; 18 | 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | } 28 | 29 | /* Code blocks */ 30 | pre[class*="language-"] { 31 | padding: 1em; 32 | margin: .5em 0; 33 | overflow: auto; 34 | border-radius: 0.3em; 35 | } 36 | 37 | :not(pre) > code[class*="language-"], 38 | pre[class*="language-"] { 39 | background: #1d1f21; 40 | } 41 | 42 | /* Inline code */ 43 | :not(pre) > code[class*="language-"] { 44 | padding: .1em; 45 | border-radius: .3em; 46 | } 47 | 48 | .token.comment, 49 | .token.prolog, 50 | .token.doctype, 51 | .token.cdata { 52 | color: #7C7C7C; 53 | } 54 | 55 | .token.punctuation { 56 | color: #c5c8c6; 57 | } 58 | 59 | .namespace { 60 | opacity: .7; 61 | } 62 | 63 | .token.property, 64 | .token.keyword, 65 | .token.tag { 66 | color: #96CBFE; 67 | } 68 | 69 | .token.class-name { 70 | color: #FFFFB6; 71 | text-decoration: underline; 72 | } 73 | 74 | .token.boolean, 75 | .token.constant { 76 | color: #99CC99; 77 | } 78 | 79 | .token.symbol, 80 | .token.deleted { 81 | color: #f92672; 82 | } 83 | 84 | .token.number { 85 | color: #FF73FD; 86 | } 87 | 88 | .token.selector, 89 | .token.attr-name, 90 | .token.string, 91 | .token.char, 92 | .token.builtin, 93 | .token.inserted { 94 | color: #A8FF60; 95 | } 96 | 97 | .token.variable { 98 | color: #C6C5FE; 99 | } 100 | 101 | .token.operator { 102 | color: #EDEDED; 103 | } 104 | 105 | .token.entity { 106 | color: #FFFFB6; 107 | cursor: help; 108 | } 109 | 110 | .token.url { 111 | color: #96CBFE; 112 | } 113 | 114 | .language-css .token.string, 115 | .style .token.string { 116 | color: #87C38A; 117 | } 118 | 119 | .token.atrule, 120 | .token.attr-value { 121 | color: #F9EE98; 122 | } 123 | 124 | .token.function { 125 | color: #DAD085; 126 | } 127 | 128 | .token.regex { 129 | color: #E9C062; 130 | } 131 | 132 | .token.important { 133 | color: #fd971f; 134 | } 135 | 136 | .token.important, 137 | .token.bold { 138 | font-weight: bold; 139 | } 140 | 141 | .token.italic { 142 | font-style: italic; 143 | } 144 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tut", 3 | "description": "Easily build beautiful tutorials with Vue", 4 | "version": "0.2.14", 5 | "main": "dist/vue-tut.umd.js", 6 | "module": "dist/vue-tut.esm.js", 7 | "unpkg": "dist/vue-tut.min.js", 8 | "browser": { 9 | "./sfc": "src/vue-tut.vue" 10 | }, 11 | "license": "Apache-2.0", 12 | "author": { 13 | "name": "John Susek", 14 | "email": "john@johnsolo.net" 15 | }, 16 | "bugs": { 17 | "url": "https://github.com/evwt/vue-tut/issues" 18 | }, 19 | "homepage": "https://github.com/evwt/vue-tut", 20 | "repository": { 21 | "url": "https://github.com/evwt/vue-tut" 22 | }, 23 | "keywords": [ 24 | "vue", 25 | "tutorial", 26 | "documentation", 27 | "builder" 28 | ], 29 | "scripts": { 30 | "docs:vuese": "vuese gen", 31 | "docs:build": "./scripts/buildDocs.sh", 32 | "docs:watch": "nodemon --ignore docs/ --exec npm run docs:build -e scss,js,vue,md", 33 | "build": "npm run build:css & npm run docs:build & npm run build:umd & npm run build:es & npm run build:unpkg", 34 | "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-tut.umd.js", 35 | "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-tut.esm.js", 36 | "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-tut.min.js", 37 | "build:watch": "nodemon --ignore dist/ -e scss,js,vue --exec npm run build", 38 | "build:watch:css": "nodemon --ignore dist/ --exec ./scripts/buildThemes.sh", 39 | "build:css": "./scripts/buildThemes.sh" 40 | }, 41 | "dependencies": { 42 | "core-js": "^3.6.5", 43 | "lodash": "^4.17.20", 44 | "prism-themes": "^1.4.0", 45 | "vue-intersect": "^1.1.6", 46 | "vue-prism-component": "^1.2.0", 47 | "vue-prism-editor": "^1.2.2", 48 | "webfontloader": "^1.6.28" 49 | }, 50 | "devDependencies": { 51 | "@rollup/plugin-alias": "^3.1.1", 52 | "@rollup/plugin-buble": "^0.21.3", 53 | "@rollup/plugin-commonjs": "^15.0.0", 54 | "@rollup/plugin-node-resolve": "^9.0.0", 55 | "@vue/cli-plugin-babel": "~4.5.0", 56 | "@vue/cli-plugin-eslint": "~4.5.0", 57 | "@vue/cli-service": "~4.5.0", 58 | "@vue/eslint-config-airbnb": "^5.0.2", 59 | "babel-eslint": "^10.1.0", 60 | "eslint": "^6.7.2", 61 | "eslint-plugin-import": "^2.20.2", 62 | "eslint-plugin-vue": "^6.2.2", 63 | "rollup": "^2.26.4", 64 | "rollup-plugin-alias": "^2.2.0", 65 | "rollup-plugin-css-only": "^2.1.0", 66 | "rollup-plugin-postcss": "^3.1.5", 67 | "rollup-plugin-scss": "^2.6.0", 68 | "rollup-plugin-vue": "^5.1.9", 69 | "sass": "^1.26.5", 70 | "sass-loader": "^8.0.2", 71 | "vue": "2.6.11", 72 | "vue-template-compiler": "^2.6.11" 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /dist/code-themes/dark.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js Dark theme for JavaScript, CSS and HTML 3 | * Based on the slides of the talk “/Reg(exp){2}lained/” 4 | * @author Lea Verou 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: white; 10 | background: none; 11 | text-shadow: 0 -.1em .2em black; 12 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 13 | font-size: 1em; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | @media print { 32 | code[class*="language-"], 33 | pre[class*="language-"] { 34 | text-shadow: none; 35 | } 36 | } 37 | 38 | pre[class*="language-"], 39 | :not(pre) > code[class*="language-"] { 40 | background: hsl(30, 20%, 25%); 41 | } 42 | 43 | /* Code blocks */ 44 | pre[class*="language-"] { 45 | padding: 1em; 46 | margin: .5em 0; 47 | overflow: auto; 48 | border: .3em solid hsl(30, 20%, 40%); 49 | border-radius: .5em; 50 | box-shadow: 1px 1px .5em black inset; 51 | } 52 | 53 | /* Inline code */ 54 | :not(pre) > code[class*="language-"] { 55 | padding: .15em .2em .05em; 56 | border-radius: .3em; 57 | border: .13em solid hsl(30, 20%, 40%); 58 | box-shadow: 1px 1px .3em -.1em black inset; 59 | white-space: normal; 60 | } 61 | 62 | .token.comment, 63 | .token.prolog, 64 | .token.doctype, 65 | .token.cdata { 66 | color: hsl(30, 20%, 50%); 67 | } 68 | 69 | .token.punctuation { 70 | opacity: .7; 71 | } 72 | 73 | .token.namespace { 74 | opacity: .7; 75 | } 76 | 77 | .token.property, 78 | .token.tag, 79 | .token.boolean, 80 | .token.number, 81 | .token.constant, 82 | .token.symbol { 83 | color: hsl(350, 40%, 70%); 84 | } 85 | 86 | .token.selector, 87 | .token.attr-name, 88 | .token.string, 89 | .token.char, 90 | .token.builtin, 91 | .token.inserted { 92 | color: hsl(75, 70%, 60%); 93 | } 94 | 95 | .token.operator, 96 | .token.entity, 97 | .token.url, 98 | .language-css .token.string, 99 | .style .token.string, 100 | .token.variable { 101 | color: hsl(40, 90%, 60%); 102 | } 103 | 104 | .token.atrule, 105 | .token.attr-value, 106 | .token.keyword { 107 | color: hsl(350, 40%, 70%); 108 | } 109 | 110 | .token.regex, 111 | .token.important { 112 | color: #e90; 113 | } 114 | 115 | .token.important, 116 | .token.bold { 117 | font-weight: bold; 118 | } 119 | .token.italic { 120 | font-style: italic; 121 | } 122 | 123 | .token.entity { 124 | cursor: help; 125 | } 126 | 127 | .token.deleted { 128 | color: red; 129 | } 130 | -------------------------------------------------------------------------------- /dist/code-themes/ghcolors.css: -------------------------------------------------------------------------------- 1 | /** 2 | * GHColors theme by Avi Aryan (http://aviaryan.in) 3 | * Inspired by Github syntax coloring 4 | */ 5 | 6 | code[class*="language-"], 7 | pre[class*="language-"] { 8 | color: #393A34; 9 | font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; 10 | direction: ltr; 11 | text-align: left; 12 | white-space: pre; 13 | word-spacing: normal; 14 | word-break: normal; 15 | font-size: .9em; 16 | line-height: 1.2em; 17 | 18 | -moz-tab-size: 4; 19 | -o-tab-size: 4; 20 | tab-size: 4; 21 | 22 | -webkit-hyphens: none; 23 | -moz-hyphens: none; 24 | -ms-hyphens: none; 25 | hyphens: none; 26 | } 27 | 28 | pre > code[class*="language-"] { 29 | font-size: 1em; 30 | } 31 | 32 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 33 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 34 | background: #b3d4fc; 35 | } 36 | 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 39 | background: #b3d4fc; 40 | } 41 | 42 | /* Code blocks */ 43 | pre[class*="language-"] { 44 | padding: 1em; 45 | margin: .5em 0; 46 | overflow: auto; 47 | border: 1px solid #dddddd; 48 | background-color: white; 49 | } 50 | 51 | /* Inline code */ 52 | :not(pre) > code[class*="language-"] { 53 | padding: .2em; 54 | padding-top: 1px; 55 | padding-bottom: 1px; 56 | background: #f8f8f8; 57 | border: 1px solid #dddddd; 58 | } 59 | 60 | .token.comment, 61 | .token.prolog, 62 | .token.doctype, 63 | .token.cdata { 64 | color: #999988; 65 | font-style: italic; 66 | } 67 | 68 | .token.namespace { 69 | opacity: .7; 70 | } 71 | 72 | .token.string, 73 | .token.attr-value { 74 | color: #e3116c; 75 | } 76 | 77 | .token.punctuation, 78 | .token.operator { 79 | color: #393A34; /* no highlight */ 80 | } 81 | 82 | .token.entity, 83 | .token.url, 84 | .token.symbol, 85 | .token.number, 86 | .token.boolean, 87 | .token.variable, 88 | .token.constant, 89 | .token.property, 90 | .token.regex, 91 | .token.inserted { 92 | color: #36acaa; 93 | } 94 | 95 | .token.atrule, 96 | .token.keyword, 97 | .token.attr-name, 98 | .language-autohotkey .token.selector { 99 | color: #00a4db; 100 | } 101 | 102 | .token.function, 103 | .token.deleted, 104 | .language-autohotkey .token.tag { 105 | color: #9a050f; 106 | } 107 | 108 | .token.tag, 109 | .token.selector, 110 | .language-autohotkey .token.keyword { 111 | color: #00009f; 112 | } 113 | 114 | .token.important, 115 | .token.function, 116 | .token.bold { 117 | font-weight: bold; 118 | } 119 | 120 | .token.italic { 121 | font-style: italic; 122 | } 123 | -------------------------------------------------------------------------------- /src/packages/TutorialSection/TutorialSection.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 97 | -------------------------------------------------------------------------------- /dist/code-themes/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js default theme for JavaScript, CSS and HTML 3 | * Based on dabblet (http://dabblet.com) 4 | * @author Lea Verou 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: black; 10 | background: none; 11 | text-shadow: 0 1px white; 12 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 13 | font-size: 1em; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 33 | text-shadow: none; 34 | background: #b3d4fc; 35 | } 36 | 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 39 | text-shadow: none; 40 | background: #b3d4fc; 41 | } 42 | 43 | @media print { 44 | code[class*="language-"], 45 | pre[class*="language-"] { 46 | text-shadow: none; 47 | } 48 | } 49 | 50 | /* Code blocks */ 51 | pre[class*="language-"] { 52 | padding: 1em; 53 | margin: .5em 0; 54 | overflow: auto; 55 | } 56 | 57 | :not(pre) > code[class*="language-"], 58 | pre[class*="language-"] { 59 | background: #f5f2f0; 60 | } 61 | 62 | /* Inline code */ 63 | :not(pre) > code[class*="language-"] { 64 | padding: .1em; 65 | border-radius: .3em; 66 | white-space: normal; 67 | } 68 | 69 | .token.comment, 70 | .token.prolog, 71 | .token.doctype, 72 | .token.cdata { 73 | color: slategray; 74 | } 75 | 76 | .token.punctuation { 77 | color: #999; 78 | } 79 | 80 | .token.namespace { 81 | opacity: .7; 82 | } 83 | 84 | .token.property, 85 | .token.tag, 86 | .token.boolean, 87 | .token.number, 88 | .token.constant, 89 | .token.symbol, 90 | .token.deleted { 91 | color: #905; 92 | } 93 | 94 | .token.selector, 95 | .token.attr-name, 96 | .token.string, 97 | .token.char, 98 | .token.builtin, 99 | .token.inserted { 100 | color: #690; 101 | } 102 | 103 | .token.operator, 104 | .token.entity, 105 | .token.url, 106 | .language-css .token.string, 107 | .style .token.string { 108 | color: #9a6e3a; 109 | /* This background color was intended by the author of this theme. */ 110 | background: hsla(0, 0%, 100%, .5); 111 | } 112 | 113 | .token.atrule, 114 | .token.attr-value, 115 | .token.keyword { 116 | color: #07a; 117 | } 118 | 119 | .token.function, 120 | .token.class-name { 121 | color: #DD4A68; 122 | } 123 | 124 | .token.regex, 125 | .token.important, 126 | .token.variable { 127 | color: #e90; 128 | } 129 | 130 | .token.important, 131 | .token.bold { 132 | font-weight: bold; 133 | } 134 | .token.italic { 135 | font-style: italic; 136 | } 137 | 138 | .token.entity { 139 | cursor: help; 140 | } 141 | -------------------------------------------------------------------------------- /dist/code-themes/funky.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js Funky theme 3 | * Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/ 4 | * @author Lea Verou 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 10 | font-size: 1em; 11 | text-align: left; 12 | white-space: pre; 13 | word-spacing: normal; 14 | word-break: normal; 15 | word-wrap: normal; 16 | line-height: 1.5; 17 | 18 | -moz-tab-size: 4; 19 | -o-tab-size: 4; 20 | tab-size: 4; 21 | 22 | -webkit-hyphens: none; 23 | -moz-hyphens: none; 24 | -ms-hyphens: none; 25 | hyphens: none; 26 | } 27 | 28 | /* Code blocks */ 29 | pre[class*="language-"] { 30 | padding: .4em .8em; 31 | margin: .5em 0; 32 | overflow: auto; 33 | background: url('data:image/svg+xml;charset=utf-8,%0D%0A%0D%0A%0D%0A<%2Fsvg>'); 34 | background-size: 1em 1em; 35 | } 36 | 37 | code[class*="language-"] { 38 | background: black; 39 | color: white; 40 | box-shadow: -.3em 0 0 .3em black, .3em 0 0 .3em black; 41 | } 42 | 43 | /* Inline code */ 44 | :not(pre) > code[class*="language-"] { 45 | padding: .2em; 46 | border-radius: .3em; 47 | box-shadow: none; 48 | white-space: normal; 49 | } 50 | 51 | .token.comment, 52 | .token.prolog, 53 | .token.doctype, 54 | .token.cdata { 55 | color: #aaa; 56 | } 57 | 58 | .token.punctuation { 59 | color: #999; 60 | } 61 | 62 | .token.namespace { 63 | opacity: .7; 64 | } 65 | 66 | .token.property, 67 | .token.tag, 68 | .token.boolean, 69 | .token.number, 70 | .token.constant, 71 | .token.symbol { 72 | color: #0cf; 73 | } 74 | 75 | .token.selector, 76 | .token.attr-name, 77 | .token.string, 78 | .token.char, 79 | .token.builtin { 80 | color: yellow; 81 | } 82 | 83 | .token.operator, 84 | .token.entity, 85 | .token.url, 86 | .language-css .token.string, 87 | .token.variable, 88 | .token.inserted { 89 | color: yellowgreen; 90 | } 91 | 92 | .token.atrule, 93 | .token.attr-value, 94 | .token.keyword { 95 | color: deeppink; 96 | } 97 | 98 | .token.regex, 99 | .token.important { 100 | color: orange; 101 | } 102 | 103 | .token.important, 104 | .token.bold { 105 | font-weight: bold; 106 | } 107 | .token.italic { 108 | font-style: italic; 109 | } 110 | 111 | .token.entity { 112 | cursor: help; 113 | } 114 | 115 | .token.deleted { 116 | color: red; 117 | } 118 | 119 | /* Plugin styles: Diff Highlight */ 120 | pre.diff-highlight.diff-highlight > code .token.deleted:not(.prefix), 121 | pre > code.diff-highlight.diff-highlight .token.deleted:not(.prefix) { 122 | background-color: rgba(255, 0, 0, .3); 123 | display: inline; 124 | } 125 | 126 | pre.diff-highlight.diff-highlight > code .token.inserted:not(.prefix), 127 | pre > code.diff-highlight.diff-highlight .token.inserted:not(.prefix) { 128 | background-color: rgba(0, 255, 128, .3); 129 | display: inline; 130 | } 131 | -------------------------------------------------------------------------------- /dist/code-themes/synthwave84.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Synthwave '84 Theme originally by Robb Owen [@Robb0wen] for Visual Studio Code 3 | * Demo: https://marc.dev/demo/prism-synthwave84 4 | * 5 | * Ported for PrismJS by Marc Backes [@themarcba] 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: #f92aad; 11 | text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3; 12 | background: none; 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | font-size: 1em; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | word-wrap: normal; 20 | line-height: 1.5; 21 | 22 | -moz-tab-size: 4; 23 | -o-tab-size: 4; 24 | tab-size: 4; 25 | 26 | -webkit-hyphens: none; 27 | -moz-hyphens: none; 28 | -ms-hyphens: none; 29 | hyphens: none; 30 | } 31 | 32 | /* Code blocks */ 33 | pre[class*="language-"] { 34 | padding: 1em; 35 | margin: .5em 0; 36 | overflow: auto; 37 | } 38 | 39 | :not(pre) > code[class*="language-"], 40 | pre[class*="language-"] { 41 | background-color: transparent !important; 42 | background-image: linear-gradient(to bottom, #2a2139 75%, #34294f); 43 | } 44 | 45 | /* Inline code */ 46 | :not(pre) > code[class*="language-"] { 47 | padding: .1em; 48 | border-radius: .3em; 49 | white-space: normal; 50 | } 51 | 52 | .token.comment, 53 | .token.block-comment, 54 | .token.prolog, 55 | .token.doctype, 56 | .token.cdata { 57 | color: #8e8e8e; 58 | } 59 | 60 | .token.punctuation { 61 | color: #ccc; 62 | } 63 | 64 | .token.tag, 65 | .token.attr-name, 66 | .token.namespace, 67 | .token.number, 68 | .token.unit, 69 | .token.hexcode, 70 | .token.deleted { 71 | color: #e2777a; 72 | } 73 | 74 | .token.property, 75 | .token.selector { 76 | color: #72f1b8; 77 | text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475; 78 | } 79 | 80 | .token.function-name { 81 | color: #6196cc; 82 | } 83 | 84 | .token.boolean, 85 | .token.selector .token.id, 86 | .token.function { 87 | color: #fdfdfd; 88 | text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975; 89 | } 90 | 91 | .token.class-name { 92 | color: #fff5f6; 93 | text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75; 94 | } 95 | 96 | .token.constant, 97 | .token.symbol { 98 | color: #f92aad; 99 | text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3; 100 | } 101 | 102 | .token.important, 103 | .token.atrule, 104 | .token.keyword, 105 | .token.selector .token.class, 106 | .token.builtin { 107 | color: #f4eee4; 108 | text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575; 109 | } 110 | 111 | .token.string, 112 | .token.char, 113 | .token.attr-value, 114 | .token.regex, 115 | .token.variable { 116 | color: #f87c32; 117 | } 118 | 119 | .token.operator, 120 | .token.entity, 121 | .token.url { 122 | color: #67cdcc; 123 | } 124 | 125 | .token.important, 126 | .token.bold { 127 | font-weight: bold; 128 | } 129 | 130 | .token.italic { 131 | font-style: italic; 132 | } 133 | 134 | .token.entity { 135 | cursor: help; 136 | } 137 | 138 | .token.inserted { 139 | color: green; 140 | } 141 | -------------------------------------------------------------------------------- /dist/code-themes/a11y-dark.css: -------------------------------------------------------------------------------- 1 | /** 2 | * a11y-dark theme for JavaScript, CSS, and HTML 3 | * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css 4 | * @author ericwbailey 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: #f8f8f2; 10 | background: none; 11 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 12 | text-align: left; 13 | white-space: pre; 14 | word-spacing: normal; 15 | word-break: normal; 16 | word-wrap: normal; 17 | line-height: 1.5; 18 | 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | } 28 | 29 | /* Code blocks */ 30 | pre[class*="language-"] { 31 | padding: 1em; 32 | margin: 0.5em 0; 33 | overflow: auto; 34 | border-radius: 0.3em; 35 | } 36 | 37 | :not(pre) > code[class*="language-"], 38 | pre[class*="language-"] { 39 | background: #2b2b2b; 40 | } 41 | 42 | /* Inline code */ 43 | :not(pre) > code[class*="language-"] { 44 | padding: 0.1em; 45 | border-radius: 0.3em; 46 | white-space: normal; 47 | } 48 | 49 | .token.comment, 50 | .token.prolog, 51 | .token.doctype, 52 | .token.cdata { 53 | color: #d4d0ab; 54 | } 55 | 56 | .token.punctuation { 57 | color: #fefefe; 58 | } 59 | 60 | .token.property, 61 | .token.tag, 62 | .token.constant, 63 | .token.symbol, 64 | .token.deleted { 65 | color: #ffa07a; 66 | } 67 | 68 | .token.boolean, 69 | .token.number { 70 | color: #00e0e0; 71 | } 72 | 73 | .token.selector, 74 | .token.attr-name, 75 | .token.string, 76 | .token.char, 77 | .token.builtin, 78 | .token.inserted { 79 | color: #abe338; 80 | } 81 | 82 | .token.operator, 83 | .token.entity, 84 | .token.url, 85 | .language-css .token.string, 86 | .style .token.string, 87 | .token.variable { 88 | color: #00e0e0; 89 | } 90 | 91 | .token.atrule, 92 | .token.attr-value, 93 | .token.function { 94 | color: #ffd700; 95 | } 96 | 97 | .token.keyword { 98 | color: #00e0e0; 99 | } 100 | 101 | .token.regex, 102 | .token.important { 103 | color: #ffd700; 104 | } 105 | 106 | .token.important, 107 | .token.bold { 108 | font-weight: bold; 109 | } 110 | 111 | .token.italic { 112 | font-style: italic; 113 | } 114 | 115 | .token.entity { 116 | cursor: help; 117 | } 118 | 119 | @media screen and (-ms-high-contrast: active) { 120 | code[class*="language-"], 121 | pre[class*="language-"] { 122 | color: windowText; 123 | background: window; 124 | } 125 | 126 | :not(pre) > code[class*="language-"], 127 | pre[class*="language-"] { 128 | background: window; 129 | } 130 | 131 | .token.important { 132 | background: highlight; 133 | color: window; 134 | font-weight: normal; 135 | } 136 | 137 | .token.atrule, 138 | .token.attr-value, 139 | .token.function, 140 | .token.keyword, 141 | .token.operator, 142 | .token.selector { 143 | font-weight: bold; 144 | } 145 | 146 | .token.attr-value, 147 | .token.comment, 148 | .token.doctype, 149 | .token.function, 150 | .token.keyword, 151 | .token.operator, 152 | .token.property, 153 | .token.string { 154 | color: highlight; 155 | } 156 | 157 | .token.attr-value, 158 | .token.url { 159 | font-weight: normal; 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /dist/code-themes/solarizedlight.css: -------------------------------------------------------------------------------- 1 | /* 2 | Solarized Color Schemes originally by Ethan Schoonover 3 | http://ethanschoonover.com/solarized 4 | 5 | Ported for PrismJS by Hector Matos 6 | Website: https://krakendev.io 7 | Twitter Handle: https://twitter.com/allonsykraken) 8 | */ 9 | 10 | /* 11 | SOLARIZED HEX 12 | --------- ------- 13 | base03 #002b36 14 | base02 #073642 15 | base01 #586e75 16 | base00 #657b83 17 | base0 #839496 18 | base1 #93a1a1 19 | base2 #eee8d5 20 | base3 #fdf6e3 21 | yellow #b58900 22 | orange #cb4b16 23 | red #dc322f 24 | magenta #d33682 25 | violet #6c71c4 26 | blue #268bd2 27 | cyan #2aa198 28 | green #859900 29 | */ 30 | 31 | code[class*="language-"], 32 | pre[class*="language-"] { 33 | color: #657b83; /* base00 */ 34 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 35 | font-size: 1em; 36 | text-align: left; 37 | white-space: pre; 38 | word-spacing: normal; 39 | word-break: normal; 40 | word-wrap: normal; 41 | 42 | line-height: 1.5; 43 | 44 | -moz-tab-size: 4; 45 | -o-tab-size: 4; 46 | tab-size: 4; 47 | 48 | -webkit-hyphens: none; 49 | -moz-hyphens: none; 50 | -ms-hyphens: none; 51 | hyphens: none; 52 | } 53 | 54 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 55 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 56 | background: #073642; /* base02 */ 57 | } 58 | 59 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 60 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 61 | background: #073642; /* base02 */ 62 | } 63 | 64 | /* Code blocks */ 65 | pre[class*="language-"] { 66 | padding: 1em; 67 | margin: .5em 0; 68 | overflow: auto; 69 | border-radius: 0.3em; 70 | } 71 | 72 | :not(pre) > code[class*="language-"], 73 | pre[class*="language-"] { 74 | background-color: #fdf6e3; /* base3 */ 75 | } 76 | 77 | /* Inline code */ 78 | :not(pre) > code[class*="language-"] { 79 | padding: .1em; 80 | border-radius: .3em; 81 | } 82 | 83 | .token.comment, 84 | .token.prolog, 85 | .token.doctype, 86 | .token.cdata { 87 | color: #93a1a1; /* base1 */ 88 | } 89 | 90 | .token.punctuation { 91 | color: #586e75; /* base01 */ 92 | } 93 | 94 | .token.namespace { 95 | opacity: .7; 96 | } 97 | 98 | .token.property, 99 | .token.tag, 100 | .token.boolean, 101 | .token.number, 102 | .token.constant, 103 | .token.symbol, 104 | .token.deleted { 105 | color: #268bd2; /* blue */ 106 | } 107 | 108 | .token.selector, 109 | .token.attr-name, 110 | .token.string, 111 | .token.char, 112 | .token.builtin, 113 | .token.url, 114 | .token.inserted { 115 | color: #2aa198; /* cyan */ 116 | } 117 | 118 | .token.entity { 119 | color: #657b83; /* base00 */ 120 | background: #eee8d5; /* base2 */ 121 | } 122 | 123 | .token.atrule, 124 | .token.attr-value, 125 | .token.keyword { 126 | color: #859900; /* green */ 127 | } 128 | 129 | .token.function, 130 | .token.class-name { 131 | color: #b58900; /* yellow */ 132 | } 133 | 134 | .token.regex, 135 | .token.important, 136 | .token.variable { 137 | color: #cb4b16; /* orange */ 138 | } 139 | 140 | .token.important, 141 | .token.bold { 142 | font-weight: bold; 143 | } 144 | .token.italic { 145 | font-style: italic; 146 | } 147 | 148 | .token.entity { 149 | cursor: help; 150 | } 151 | -------------------------------------------------------------------------------- /dist/code-themes/darcula.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Darcula theme 3 | * 4 | * Adapted from a theme based on: 5 | * IntelliJ Darcula Theme (https://github.com/bulenkov/Darcula) 6 | * 7 | * @author Alexandre Paradis 8 | * @version 1.0 9 | */ 10 | 11 | code[class*="language-"], 12 | pre[class*="language-"] { 13 | color: #a9b7c6; 14 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 15 | direction: ltr; 16 | text-align: left; 17 | white-space: pre; 18 | word-spacing: normal; 19 | word-break: normal; 20 | line-height: 1.5; 21 | 22 | -moz-tab-size: 4; 23 | -o-tab-size: 4; 24 | tab-size: 4; 25 | 26 | -webkit-hyphens: none; 27 | -moz-hyphens: none; 28 | -ms-hyphens: none; 29 | hyphens: none; 30 | } 31 | 32 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 33 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 34 | color: inherit; 35 | background: rgba(33, 66, 131, .85); 36 | } 37 | 38 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 39 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 40 | color: inherit; 41 | background: rgba(33, 66, 131, .85); 42 | } 43 | 44 | /* Code blocks */ 45 | pre[class*="language-"] { 46 | padding: 1em; 47 | margin: .5em 0; 48 | overflow: auto; 49 | } 50 | 51 | :not(pre) > code[class*="language-"], 52 | pre[class*="language-"] { 53 | background: #2b2b2b; 54 | } 55 | 56 | /* Inline code */ 57 | :not(pre) > code[class*="language-"] { 58 | padding: .1em; 59 | border-radius: .3em; 60 | } 61 | 62 | .token.comment, 63 | .token.prolog, 64 | .token.cdata { 65 | color: #808080; 66 | } 67 | 68 | .token.delimiter, 69 | .token.boolean, 70 | .token.keyword, 71 | .token.selector, 72 | .token.important, 73 | .token.atrule { 74 | color: #cc7832; 75 | } 76 | 77 | .token.operator, 78 | .token.punctuation, 79 | .token.attr-name { 80 | color: #a9b7c6; 81 | } 82 | 83 | .token.tag, 84 | .token.tag .punctuation, 85 | .token.doctype, 86 | .token.builtin { 87 | color: #e8bf6a; 88 | } 89 | 90 | .token.entity, 91 | .token.number, 92 | .token.symbol { 93 | color: #6897bb; 94 | } 95 | 96 | .token.property, 97 | .token.constant, 98 | .token.variable { 99 | color: #9876aa; 100 | } 101 | 102 | .token.string, 103 | .token.char { 104 | color: #6a8759; 105 | } 106 | 107 | .token.attr-value, 108 | .token.attr-value .punctuation { 109 | color: #a5c261; 110 | } 111 | 112 | .token.attr-value .punctuation:first-child { 113 | color: #a9b7c6; 114 | } 115 | 116 | .token.url { 117 | color: #287bde; 118 | text-decoration: underline; 119 | } 120 | 121 | .token.function { 122 | color: #ffc66d; 123 | } 124 | 125 | .token.regex { 126 | background: #364135; 127 | } 128 | 129 | .token.bold { 130 | font-weight: bold; 131 | } 132 | 133 | .token.italic { 134 | font-style: italic; 135 | } 136 | 137 | .token.inserted { 138 | background: #294436; 139 | } 140 | 141 | .token.deleted { 142 | background: #484a4a; 143 | } 144 | 145 | code.language-css .token.property, 146 | code.language-css .token.property + .token.punctuation { 147 | color: #a9b7c6; 148 | } 149 | 150 | code.language-css .token.id { 151 | color: #ffc66d; 152 | } 153 | 154 | code.language-css .token.selector > .token.class, 155 | code.language-css .token.selector > .token.attribute, 156 | code.language-css .token.selector > .token.pseudo-class, 157 | code.language-css .token.selector > .token.pseudo-element { 158 | color: #ffc66d; 159 | } 160 | -------------------------------------------------------------------------------- /docs/components/TutorialHighlighter.md: -------------------------------------------------------------------------------- 1 | # TutorialHighlighter 2 | 3 | ``` 4 | 5 | 6 | 7 | ... 8 | 13 | 14 | 15 | 16 | ``` 17 | 18 | Highlight lines of text with line numbers or regexes. 19 | ## Props 20 | 21 | 22 | |Name|Description|Type|Required|Default| 23 | |---|---|---|---|---| 24 | |text|The text to highlight|`String`|`true`|-| 25 | |highlightLines|Array of integers, ranges (`'start:end'`) and/or regexes to highlight|`Array`|`false`|[]| 26 | |lang|Language to use for syntax highlighting

`abap` / `abnf` / `actionscript` / `ada` / `agda` / `al` / `antlr4` / `apacheconf` / `apl` / `applescript` / `aql` / `arduino` / `arff` / `asciidoc` / `asm6502` / `aspnet` / `autohotkey` / `autoit` / `bash` / `basic` / `batch` / `bbcode` / `bison` / `bnf` / `brainfuck` / `brightscript` / `bro` / `bsl` / `c` / `cil` / `clike` / `clojure` / `cmake` / `coffeescript` / `concurnas` / `core` / `cpp` / `crystal` / `csharp` / `csp` / `css-extras` / `css` / `cypher` / `d` / `dart` / `dax` / `dhall` / `diff` / `django` / `dns-zone-file` / `docker` / `ebnf` / `editorconfig` / `eiffel` / `ejs` / `elixir` / `elm` / `erb` / `erlang` / `etlua` / `excel-formula` / `factor` / `firestore-security-rules` / `flow` / `fortran` / `fsharp` / `ftl` / `gcode` / `gdscript` / `gedcom` / `gherkin` / `git` / `glsl` / `gml` / `go` / `graphql` / `groovy` / `haml` / `handlebars` / `haskell` / `haxe` / `hcl` / `hlsl` / `hpkp` / `hsts` / `http` / `ichigojam` / `icon` / `iecst` / `ignore` / `inform7` / `ini` / `io` / `j` / `java` / `javadoc` / `javadoclike` / `javascript` / `javastacktrace` / `jolie` / `jq` / `js-extras` / `js-templates` / `jsdoc` / `json` / `json5` / `jsonp` / `jsstacktrace` / `jsx` / `julia` / `keyman` / `kotlin` / `latex` / `latte` / `less` / `lilypond` / `liquid` / `lisp` / `livescript` / `llvm` / `lolcode` / `lua` / `makefile` / `markdown` / `markup-templating` / `markup` / `matlab` / `mel` / `mizar` / `mongodb` / `monkey` / `moonscript` / `n1ql` / `n4js` / `nand2tetris-hdl` / `naniscript` / `nasm` / `neon` / `nginx` / `nim` / `nix` / `nsis` / `objectivec` / `ocaml` / `opencl` / `oz` / `parigp` / `parser` / `pascal` / `pascaligo` / `pcaxis` / `peoplecode` / `perl` / `php-extras` / `php` / `phpdoc` / `plsql` / `powerquery` / `powershell` / `processing` / `prolog` / `properties` / `protobuf` / `pug` / `puppet` / `pure` / `purebasic` / `python` / `q` / `qml` / `qore` / `r` / `racket` / `reason` / `regex` / `renpy` / `rest` / `rip` / `roboconf` / `robotframework` / `ruby` / `rust` / `sas` / `sass` / `scala` / `scheme` / `scss` / `shell-session` / `smali` / `smalltalk` / `smarty` / `solidity` / `solution-file` / `soy` / `sparql` / `splunk-spl` / `sqf` / `sql` / `stan` / `stylus` / `swift` / `t4-cs` / `t4-templating` / `t4-vb` / `tap` / `tcl` / `textile` / `toml` / `tsx` / `tt2` / `turtle` / `twig` / `typescript` / `typoscript` / `unrealscript` / `vala` / `vbnet` / `velocity` / `verilog` / `vhdl` / `vim` / `visual-basic` / `vue` / `warpscript` / `wasm` / `wiki` / `xeora` / `xml-doc` / `xojo` / `xquery` / `yaml` / `yang` / `zig`|`String`|`false`|vue| 27 | |title|Title put above the highlighter for e.g. a filename|`String`|`false`|-| 28 | |lineNumbers|Whether or not to display line numbers|`Boolean`|`false`|true| 29 | |scrollToLine|Automatically scroll to this line number when created|`Number`|`false`|-| 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /dist/code-themes/material-dark.css: -------------------------------------------------------------------------------- 1 | code[class*="language-"], 2 | pre[class*="language-"] { 3 | text-align: left; 4 | white-space: pre; 5 | word-spacing: normal; 6 | word-break: normal; 7 | word-wrap: normal; 8 | color: #eee; 9 | background: #2f2f2f; 10 | font-family: Roboto Mono, monospace; 11 | font-size: 1em; 12 | line-height: 1.5em; 13 | 14 | -moz-tab-size: 4; 15 | -o-tab-size: 4; 16 | tab-size: 4; 17 | 18 | -webkit-hyphens: none; 19 | -moz-hyphens: none; 20 | -ms-hyphens: none; 21 | hyphens: none; 22 | } 23 | 24 | code[class*="language-"]::-moz-selection, 25 | pre[class*="language-"]::-moz-selection, 26 | code[class*="language-"] ::-moz-selection, 27 | pre[class*="language-"] ::-moz-selection { 28 | background: #363636; 29 | } 30 | 31 | code[class*="language-"]::selection, 32 | pre[class*="language-"]::selection, 33 | code[class*="language-"] ::selection, 34 | pre[class*="language-"] ::selection { 35 | background: #363636; 36 | } 37 | 38 | :not(pre) > code[class*="language-"] { 39 | white-space: normal; 40 | border-radius: 0.2em; 41 | padding: 0.1em; 42 | } 43 | 44 | pre[class*="language-"] { 45 | overflow: auto; 46 | position: relative; 47 | margin: 0.5em 0; 48 | padding: 1.25em 1em; 49 | } 50 | 51 | .language-css > code, 52 | .language-sass > code, 53 | .language-scss > code { 54 | color: #fd9170; 55 | } 56 | 57 | [class*="language-"] .namespace { 58 | opacity: 0.7; 59 | } 60 | 61 | .token.atrule { 62 | color: #c792ea; 63 | } 64 | 65 | .token.attr-name { 66 | color: #ffcb6b; 67 | } 68 | 69 | .token.attr-value { 70 | color: #a5e844; 71 | } 72 | 73 | .token.attribute { 74 | color: #a5e844; 75 | } 76 | 77 | .token.boolean { 78 | color: #c792ea; 79 | } 80 | 81 | .token.builtin { 82 | color: #ffcb6b; 83 | } 84 | 85 | .token.cdata { 86 | color: #80cbc4; 87 | } 88 | 89 | .token.char { 90 | color: #80cbc4; 91 | } 92 | 93 | .token.class { 94 | color: #ffcb6b; 95 | } 96 | 97 | .token.class-name { 98 | color: #f2ff00; 99 | } 100 | 101 | .token.comment { 102 | color: #616161; 103 | } 104 | 105 | .token.constant { 106 | color: #c792ea; 107 | } 108 | 109 | .token.deleted { 110 | color: #ff6666; 111 | } 112 | 113 | .token.doctype { 114 | color: #616161; 115 | } 116 | 117 | .token.entity { 118 | color: #ff6666; 119 | } 120 | 121 | .token.function { 122 | color: #c792ea; 123 | } 124 | 125 | .token.hexcode { 126 | color: #f2ff00; 127 | } 128 | 129 | .token.id { 130 | color: #c792ea; 131 | font-weight: bold; 132 | } 133 | 134 | .token.important { 135 | color: #c792ea; 136 | font-weight: bold; 137 | } 138 | 139 | .token.inserted { 140 | color: #80cbc4; 141 | } 142 | 143 | .token.keyword { 144 | color: #c792ea; 145 | } 146 | 147 | .token.number { 148 | color: #fd9170; 149 | } 150 | 151 | .token.operator { 152 | color: #89ddff; 153 | } 154 | 155 | .token.prolog { 156 | color: #616161; 157 | } 158 | 159 | .token.property { 160 | color: #80cbc4; 161 | } 162 | 163 | .token.pseudo-class { 164 | color: #a5e844; 165 | } 166 | 167 | .token.pseudo-element { 168 | color: #a5e844; 169 | } 170 | 171 | .token.punctuation { 172 | color: #89ddff; 173 | } 174 | 175 | .token.regex { 176 | color: #f2ff00; 177 | } 178 | 179 | .token.selector { 180 | color: #ff6666; 181 | } 182 | 183 | .token.string { 184 | color: #a5e844; 185 | } 186 | 187 | .token.symbol { 188 | color: #c792ea; 189 | } 190 | 191 | .token.tag { 192 | color: #ff6666; 193 | } 194 | 195 | .token.unit { 196 | color: #fd9170; 197 | } 198 | 199 | .token.url { 200 | color: #ff6666; 201 | } 202 | 203 | .token.variable { 204 | color: #ff6666; 205 | } 206 | -------------------------------------------------------------------------------- /dist/code-themes/material-light.css: -------------------------------------------------------------------------------- 1 | code[class*="language-"], 2 | pre[class*="language-"] { 3 | text-align: left; 4 | white-space: pre; 5 | word-spacing: normal; 6 | word-break: normal; 7 | word-wrap: normal; 8 | color: #90a4ae; 9 | background: #fafafa; 10 | font-family: Roboto Mono, monospace; 11 | font-size: 1em; 12 | line-height: 1.5em; 13 | 14 | -moz-tab-size: 4; 15 | -o-tab-size: 4; 16 | tab-size: 4; 17 | 18 | -webkit-hyphens: none; 19 | -moz-hyphens: none; 20 | -ms-hyphens: none; 21 | hyphens: none; 22 | } 23 | 24 | code[class*="language-"]::-moz-selection, 25 | pre[class*="language-"]::-moz-selection, 26 | code[class*="language-"] ::-moz-selection, 27 | pre[class*="language-"] ::-moz-selection { 28 | background: #cceae7; 29 | color: #263238; 30 | } 31 | 32 | code[class*="language-"]::selection, 33 | pre[class*="language-"]::selection, 34 | code[class*="language-"] ::selection, 35 | pre[class*="language-"] ::selection { 36 | background: #cceae7; 37 | color: #263238; 38 | } 39 | 40 | :not(pre) > code[class*="language-"] { 41 | white-space: normal; 42 | border-radius: 0.2em; 43 | padding: 0.1em; 44 | } 45 | 46 | pre[class*="language-"] { 47 | overflow: auto; 48 | position: relative; 49 | margin: 0.5em 0; 50 | padding: 1.25em 1em; 51 | } 52 | 53 | .language-css > code, 54 | .language-sass > code, 55 | .language-scss > code { 56 | color: #f76d47; 57 | } 58 | 59 | [class*="language-"] .namespace { 60 | opacity: 0.7; 61 | } 62 | 63 | .token.atrule { 64 | color: #7c4dff; 65 | } 66 | 67 | .token.attr-name { 68 | color: #39adb5; 69 | } 70 | 71 | .token.attr-value { 72 | color: #f6a434; 73 | } 74 | 75 | .token.attribute { 76 | color: #f6a434; 77 | } 78 | 79 | .token.boolean { 80 | color: #7c4dff; 81 | } 82 | 83 | .token.builtin { 84 | color: #39adb5; 85 | } 86 | 87 | .token.cdata { 88 | color: #39adb5; 89 | } 90 | 91 | .token.char { 92 | color: #39adb5; 93 | } 94 | 95 | .token.class { 96 | color: #39adb5; 97 | } 98 | 99 | .token.class-name { 100 | color: #6182b8; 101 | } 102 | 103 | .token.comment { 104 | color: #aabfc9; 105 | } 106 | 107 | .token.constant { 108 | color: #7c4dff; 109 | } 110 | 111 | .token.deleted { 112 | color: #e53935; 113 | } 114 | 115 | .token.doctype { 116 | color: #aabfc9; 117 | } 118 | 119 | .token.entity { 120 | color: #e53935; 121 | } 122 | 123 | .token.function { 124 | color: #7c4dff; 125 | } 126 | 127 | .token.hexcode { 128 | color: #f76d47; 129 | } 130 | 131 | .token.id { 132 | color: #7c4dff; 133 | font-weight: bold; 134 | } 135 | 136 | .token.important { 137 | color: #7c4dff; 138 | font-weight: bold; 139 | } 140 | 141 | .token.inserted { 142 | color: #39adb5; 143 | } 144 | 145 | .token.keyword { 146 | color: #7c4dff; 147 | } 148 | 149 | .token.number { 150 | color: #f76d47; 151 | } 152 | 153 | .token.operator { 154 | color: #39adb5; 155 | } 156 | 157 | .token.prolog { 158 | color: #aabfc9; 159 | } 160 | 161 | .token.property { 162 | color: #39adb5; 163 | } 164 | 165 | .token.pseudo-class { 166 | color: #f6a434; 167 | } 168 | 169 | .token.pseudo-element { 170 | color: #f6a434; 171 | } 172 | 173 | .token.punctuation { 174 | color: #39adb5; 175 | } 176 | 177 | .token.regex { 178 | color: #6182b8; 179 | } 180 | 181 | .token.selector { 182 | color: #e53935; 183 | } 184 | 185 | .token.string { 186 | color: #f6a434; 187 | } 188 | 189 | .token.symbol { 190 | color: #7c4dff; 191 | } 192 | 193 | .token.tag { 194 | color: #e53935; 195 | } 196 | 197 | .token.unit { 198 | color: #f76d47; 199 | } 200 | 201 | .token.url { 202 | color: #e53935; 203 | } 204 | 205 | .token.variable { 206 | color: #e53935; 207 | } 208 | -------------------------------------------------------------------------------- /dist/code-themes/material-oceanic.css: -------------------------------------------------------------------------------- 1 | code[class*="language-"], 2 | pre[class*="language-"] { 3 | text-align: left; 4 | white-space: pre; 5 | word-spacing: normal; 6 | word-break: normal; 7 | word-wrap: normal; 8 | color: #c3cee3; 9 | background: #263238; 10 | font-family: Roboto Mono, monospace; 11 | font-size: 1em; 12 | line-height: 1.5em; 13 | 14 | -moz-tab-size: 4; 15 | -o-tab-size: 4; 16 | tab-size: 4; 17 | 18 | -webkit-hyphens: none; 19 | -moz-hyphens: none; 20 | -ms-hyphens: none; 21 | hyphens: none; 22 | } 23 | 24 | code[class*="language-"]::-moz-selection, 25 | pre[class*="language-"]::-moz-selection, 26 | code[class*="language-"] ::-moz-selection, 27 | pre[class*="language-"] ::-moz-selection { 28 | background: #363636; 29 | } 30 | 31 | code[class*="language-"]::selection, 32 | pre[class*="language-"]::selection, 33 | code[class*="language-"] ::selection, 34 | pre[class*="language-"] ::selection { 35 | background: #363636; 36 | } 37 | 38 | :not(pre) > code[class*="language-"] { 39 | white-space: normal; 40 | border-radius: 0.2em; 41 | padding: 0.1em; 42 | } 43 | 44 | pre[class*="language-"] { 45 | overflow: auto; 46 | position: relative; 47 | margin: 0.5em 0; 48 | padding: 1.25em 1em; 49 | } 50 | 51 | .language-css > code, 52 | .language-sass > code, 53 | .language-scss > code { 54 | color: #fd9170; 55 | } 56 | 57 | [class*="language-"] .namespace { 58 | opacity: 0.7; 59 | } 60 | 61 | .token.atrule { 62 | color: #c792ea; 63 | } 64 | 65 | .token.attr-name { 66 | color: #ffcb6b; 67 | } 68 | 69 | .token.attr-value { 70 | color: #c3e88d; 71 | } 72 | 73 | .token.attribute { 74 | color: #c3e88d; 75 | } 76 | 77 | .token.boolean { 78 | color: #c792ea; 79 | } 80 | 81 | .token.builtin { 82 | color: #ffcb6b; 83 | } 84 | 85 | .token.cdata { 86 | color: #80cbc4; 87 | } 88 | 89 | .token.char { 90 | color: #80cbc4; 91 | } 92 | 93 | .token.class { 94 | color: #ffcb6b; 95 | } 96 | 97 | .token.class-name { 98 | color: #f2ff00; 99 | } 100 | 101 | .token.color { 102 | color: #f2ff00; 103 | } 104 | 105 | .token.comment { 106 | color: #546e7a; 107 | } 108 | 109 | .token.constant { 110 | color: #c792ea; 111 | } 112 | 113 | .token.deleted { 114 | color: #f07178; 115 | } 116 | 117 | .token.doctype { 118 | color: #546e7a; 119 | } 120 | 121 | .token.entity { 122 | color: #f07178; 123 | } 124 | 125 | .token.function { 126 | color: #c792ea; 127 | } 128 | 129 | .token.hexcode { 130 | color: #f2ff00; 131 | } 132 | 133 | .token.id { 134 | color: #c792ea; 135 | font-weight: bold; 136 | } 137 | 138 | .token.important { 139 | color: #c792ea; 140 | font-weight: bold; 141 | } 142 | 143 | .token.inserted { 144 | color: #80cbc4; 145 | } 146 | 147 | .token.keyword { 148 | color: #c792ea; 149 | font-style: italic; 150 | } 151 | 152 | .token.number { 153 | color: #fd9170; 154 | } 155 | 156 | .token.operator { 157 | color: #89ddff; 158 | } 159 | 160 | .token.prolog { 161 | color: #546e7a; 162 | } 163 | 164 | .token.property { 165 | color: #80cbc4; 166 | } 167 | 168 | .token.pseudo-class { 169 | color: #c3e88d; 170 | } 171 | 172 | .token.pseudo-element { 173 | color: #c3e88d; 174 | } 175 | 176 | .token.punctuation { 177 | color: #89ddff; 178 | } 179 | 180 | .token.regex { 181 | color: #f2ff00; 182 | } 183 | 184 | .token.selector { 185 | color: #f07178; 186 | } 187 | 188 | .token.string { 189 | color: #c3e88d; 190 | } 191 | 192 | .token.symbol { 193 | color: #c792ea; 194 | } 195 | 196 | .token.tag { 197 | color: #f07178; 198 | } 199 | 200 | .token.unit { 201 | color: #f07178; 202 | } 203 | 204 | .token.url { 205 | color: #fd9170; 206 | } 207 | 208 | .token.variable { 209 | color: #f07178; 210 | } 211 | -------------------------------------------------------------------------------- /dist/code-themes/vs.css: -------------------------------------------------------------------------------- 1 | /** 2 | * VS theme by Andrew Lock (https://andrewlock.net) 3 | * Inspired by Visual Studio syntax coloring 4 | */ 5 | 6 | code[class*="language-"], 7 | pre[class*="language-"] { 8 | color: #393A34; 9 | font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; 10 | direction: ltr; 11 | text-align: left; 12 | white-space: pre; 13 | word-spacing: normal; 14 | word-break: normal; 15 | font-size: .9em; 16 | line-height: 1.2em; 17 | 18 | -moz-tab-size: 4; 19 | -o-tab-size: 4; 20 | tab-size: 4; 21 | 22 | -webkit-hyphens: none; 23 | -moz-hyphens: none; 24 | -ms-hyphens: none; 25 | hyphens: none; 26 | } 27 | 28 | pre > code[class*="language-"] { 29 | font-size: 1em; 30 | } 31 | 32 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 33 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 34 | background: #C1DEF1; 35 | } 36 | 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 39 | background: #C1DEF1; 40 | } 41 | 42 | /* Code blocks */ 43 | pre[class*="language-"] { 44 | padding: 1em; 45 | margin: .5em 0; 46 | overflow: auto; 47 | border: 1px solid #dddddd; 48 | background-color: white; 49 | } 50 | 51 | /* Inline code */ 52 | :not(pre) > code[class*="language-"] { 53 | padding: .2em; 54 | padding-top: 1px; 55 | padding-bottom: 1px; 56 | background: #f8f8f8; 57 | border: 1px solid #dddddd; 58 | } 59 | 60 | .token.comment, 61 | .token.prolog, 62 | .token.doctype, 63 | .token.cdata { 64 | color: #008000; 65 | font-style: italic; 66 | } 67 | 68 | .token.namespace { 69 | opacity: .7; 70 | } 71 | 72 | .token.string { 73 | color: #A31515; 74 | } 75 | 76 | .token.punctuation, 77 | .token.operator { 78 | color: #393A34; /* no highlight */ 79 | } 80 | 81 | .token.url, 82 | .token.symbol, 83 | .token.number, 84 | .token.boolean, 85 | .token.variable, 86 | .token.constant, 87 | .token.inserted { 88 | color: #36acaa; 89 | } 90 | 91 | .token.atrule, 92 | .token.keyword, 93 | .token.attr-value, 94 | .language-autohotkey .token.selector, 95 | .language-json .token.boolean, 96 | .language-json .token.number, 97 | code[class*="language-css"] { 98 | color: #0000ff; 99 | } 100 | 101 | .token.function { 102 | color: #393A34; 103 | } 104 | 105 | .token.deleted, 106 | .language-autohotkey .token.tag { 107 | color: #9a050f; 108 | } 109 | 110 | .token.selector, 111 | .language-autohotkey .token.keyword { 112 | color: #00009f; 113 | } 114 | 115 | .token.important, 116 | .token.bold { 117 | font-weight: bold; 118 | } 119 | 120 | .token.italic { 121 | font-style: italic; 122 | } 123 | 124 | .token.class-name, 125 | .language-json .token.property { 126 | color: #2B91AF; 127 | } 128 | 129 | .token.tag, 130 | .token.selector { 131 | color: #800000; 132 | } 133 | 134 | .token.attr-name, 135 | .token.property, 136 | .token.regex, 137 | .token.entity { 138 | color: #ff0000; 139 | } 140 | 141 | .token.directive.tag .tag { 142 | background: #ffff00; 143 | color: #393A34; 144 | } 145 | 146 | /* overrides color-values for the Line Numbers plugin 147 | * http://prismjs.com/plugins/line-numbers/ 148 | */ 149 | .line-numbers .line-numbers-rows { 150 | border-right-color: #a5a5a5; 151 | } 152 | 153 | .line-numbers-rows > span:before { 154 | color: #2B91AF; 155 | } 156 | 157 | /* overrides color-values for the Line Highlight plugin 158 | * http://prismjs.com/plugins/line-highlight/ 159 | */ 160 | .line-highlight { 161 | background: rgba(193, 222, 241, 0.2); 162 | background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0)); 163 | background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0)); 164 | } 165 | -------------------------------------------------------------------------------- /dist/code-themes/cb.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Based on Plugin: Syntax Highlighter CB 3 | * Plugin URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js 4 | * Description: Highlight your code snippets with an easy to use shortcode based on Lea Verou's Prism.js. 5 | * Version: 1.0.0 6 | * Author: c.bavota 7 | * Author URI: http://bavotasan.comhttp://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js/ */ 8 | /* http://cbavota.bitbucket.org/syntax-highlighter/ */ 9 | 10 | /* ===== ===== */ 11 | code[class*="language-"], 12 | pre[class*="language-"] { 13 | color: #fff; 14 | text-shadow: 0 1px 1px #000; 15 | font-family: Menlo, Monaco, "Courier New", monospace; 16 | direction: ltr; 17 | text-align: left; 18 | word-spacing: normal; 19 | white-space: pre; 20 | word-wrap: normal; 21 | line-height: 1.4; 22 | background: none; 23 | border: 0; 24 | 25 | -moz-tab-size: 4; 26 | -o-tab-size: 4; 27 | tab-size: 4; 28 | 29 | -webkit-hyphens: none; 30 | -moz-hyphens: none; 31 | -ms-hyphens: none; 32 | hyphens: none; 33 | } 34 | 35 | pre[class*="language-"] code { 36 | float: left; 37 | padding: 0 15px 0 0; 38 | } 39 | 40 | pre[class*="language-"], 41 | :not(pre) > code[class*="language-"] { 42 | background: #222; 43 | } 44 | 45 | /* Code blocks */ 46 | pre[class*="language-"] { 47 | padding: 15px; 48 | margin: 1em 0; 49 | overflow: auto; 50 | -moz-border-radius: 8px; 51 | -webkit-border-radius: 8px; 52 | border-radius: 8px; 53 | } 54 | 55 | /* Inline code */ 56 | :not(pre) > code[class*="language-"] { 57 | padding: 5px 10px; 58 | line-height: 1; 59 | -moz-border-radius: 3px; 60 | -webkit-border-radius: 3px; 61 | border-radius: 3px; 62 | } 63 | 64 | .token.comment, 65 | .token.prolog, 66 | .token.doctype, 67 | .token.cdata { 68 | color: #797979; 69 | } 70 | 71 | .token.selector, 72 | .token.operator, 73 | .token.punctuation { 74 | color: #fff; 75 | } 76 | 77 | .token.namespace { 78 | opacity: .7; 79 | } 80 | 81 | .token.tag, 82 | .token.boolean { 83 | color: #ffd893; 84 | } 85 | 86 | .token.atrule, 87 | .token.attr-value, 88 | .token.hex, 89 | .token.string { 90 | color: #B0C975; 91 | } 92 | 93 | .token.property, 94 | .token.entity, 95 | .token.url, 96 | .token.attr-name, 97 | .token.keyword { 98 | color: #c27628; 99 | } 100 | 101 | .token.regex { 102 | color: #9B71C6; 103 | } 104 | 105 | .token.entity { 106 | cursor: help; 107 | } 108 | 109 | .token.function, 110 | .token.constant { 111 | color: #e5a638; 112 | } 113 | 114 | .token.variable { 115 | color: #fdfba8; 116 | } 117 | 118 | .token.number { 119 | color: #8799B0; 120 | } 121 | 122 | .token.important, 123 | .token.deliminator { 124 | color: #E45734; 125 | } 126 | 127 | /* Line highlight plugin */ 128 | pre[data-line] { 129 | position: relative; 130 | padding: 1em 0 1em 3em; 131 | } 132 | 133 | .line-highlight { 134 | position: absolute; 135 | left: 0; 136 | right: 0; 137 | margin-top: 1em; /* Same as .prism's padding-top */ 138 | background: rgba(255, 255, 255, .2); 139 | pointer-events: none; 140 | line-height: inherit; 141 | white-space: pre; 142 | } 143 | 144 | .line-highlight:before, 145 | .line-highlight[data-end]:after { 146 | content: attr(data-start); 147 | position: absolute; 148 | top: .3em; 149 | left: .6em; 150 | min-width: 1em; 151 | padding: 0 .5em; 152 | background-color: rgba(255, 255, 255, .3); 153 | color: #fff; 154 | font: bold 65%/1.5 sans-serif; 155 | text-align: center; 156 | -moz-border-radius: 8px; 157 | -webkit-border-radius: 8px; 158 | border-radius: 8px; 159 | text-shadow: none; 160 | } 161 | 162 | .line-highlight[data-end]:after { 163 | content: attr(data-end); 164 | top: auto; 165 | bottom: .4em; 166 | } 167 | 168 | /* for line numbers */ 169 | .line-numbers-rows { 170 | margin: 0; 171 | } 172 | 173 | .line-numbers-rows span { 174 | padding-right: 10px; 175 | border-right: 3px #d9d336 solid; 176 | } 177 | -------------------------------------------------------------------------------- /dist/code-themes/xonokai.css: -------------------------------------------------------------------------------- 1 | /** 2 | * xonokai theme for JavaScript, CSS and HTML 3 | * based on: https://github.com/MoOx/sass-prism-theme-base by Maxime Thirouin ~ MoOx --> http://moox.fr/ , which is Loosely based on Monokai textmate theme by http://www.monokai.nl/ 4 | * license: MIT; http://moox.mit-license.org/ 5 | */ 6 | code[class*="language-"], 7 | pre[class*="language-"] { 8 | -moz-tab-size: 2; 9 | -o-tab-size: 2; 10 | tab-size: 2; 11 | -webkit-hyphens: none; 12 | -moz-hyphens: none; 13 | -ms-hyphens: none; 14 | hyphens: none; 15 | white-space: pre; 16 | white-space: pre-wrap; 17 | word-wrap: normal; 18 | font-family: Menlo, Monaco, "Courier New", monospace; 19 | font-size: 14px; 20 | color: #76d9e6; 21 | text-shadow: none; 22 | } 23 | 24 | pre > code[class*="language-"] { 25 | font-size: 1em; 26 | } 27 | 28 | pre[class*="language-"], 29 | :not(pre) > code[class*="language-"] { 30 | background: #2a2a2a; 31 | } 32 | 33 | pre[class*="language-"] { 34 | padding: 15px; 35 | border-radius: 4px; 36 | border: 1px solid #e1e1e8; 37 | overflow: auto; 38 | position: relative; 39 | } 40 | 41 | pre[class*="language-"] code { 42 | white-space: pre; 43 | display: block; 44 | } 45 | 46 | :not(pre) > code[class*="language-"] { 47 | padding: 0.15em 0.2em 0.05em; 48 | border-radius: .3em; 49 | border: 0.13em solid #7a6652; 50 | box-shadow: 1px 1px 0.3em -0.1em #000 inset; 51 | } 52 | 53 | .token.namespace { 54 | opacity: .7; 55 | } 56 | 57 | .token.comment, 58 | .token.prolog, 59 | .token.doctype, 60 | .token.cdata { 61 | color: #6f705e; 62 | } 63 | 64 | .token.operator, 65 | .token.boolean, 66 | .token.number { 67 | color: #a77afe; 68 | } 69 | 70 | .token.attr-name, 71 | .token.string { 72 | color: #e6d06c; 73 | } 74 | 75 | .token.entity, 76 | .token.url, 77 | .language-css .token.string, 78 | .style .token.string { 79 | color: #e6d06c; 80 | } 81 | 82 | .token.selector, 83 | .token.inserted { 84 | color: #a6e22d; 85 | } 86 | 87 | .token.atrule, 88 | .token.attr-value, 89 | .token.keyword, 90 | .token.important, 91 | .token.deleted { 92 | color: #ef3b7d; 93 | } 94 | 95 | .token.regex, 96 | .token.statement { 97 | color: #76d9e6; 98 | } 99 | 100 | .token.placeholder, 101 | .token.variable { 102 | color: #fff; 103 | } 104 | 105 | .token.important, 106 | .token.statement, 107 | .token.bold { 108 | font-weight: bold; 109 | } 110 | 111 | .token.punctuation { 112 | color: #bebec5; 113 | } 114 | 115 | .token.entity { 116 | cursor: help; 117 | } 118 | 119 | .token.italic { 120 | font-style: italic; 121 | } 122 | 123 | code.language-markup { 124 | color: #f9f9f9; 125 | } 126 | 127 | code.language-markup .token.tag { 128 | color: #ef3b7d; 129 | } 130 | 131 | code.language-markup .token.attr-name { 132 | color: #a6e22d; 133 | } 134 | 135 | code.language-markup .token.attr-value { 136 | color: #e6d06c; 137 | } 138 | 139 | code.language-markup .token.style, 140 | code.language-markup .token.script { 141 | color: #76d9e6; 142 | } 143 | 144 | code.language-markup .token.script .token.keyword { 145 | color: #76d9e6; 146 | } 147 | 148 | /* Line highlight plugin */ 149 | pre[class*="language-"][data-line] { 150 | position: relative; 151 | padding: 1em 0 1em 3em; 152 | } 153 | 154 | pre[data-line] .line-highlight { 155 | position: absolute; 156 | left: 0; 157 | right: 0; 158 | padding: 0; 159 | margin-top: 1em; 160 | background: rgba(255, 255, 255, 0.08); 161 | pointer-events: none; 162 | line-height: inherit; 163 | white-space: pre; 164 | } 165 | 166 | pre[data-line] .line-highlight:before, 167 | pre[data-line] .line-highlight[data-end]:after { 168 | content: attr(data-start); 169 | position: absolute; 170 | top: .4em; 171 | left: .6em; 172 | min-width: 1em; 173 | padding: 0.2em 0.5em; 174 | background-color: rgba(255, 255, 255, 0.4); 175 | color: black; 176 | font: bold 65%/1 sans-serif; 177 | height: 1em; 178 | line-height: 1em; 179 | text-align: center; 180 | border-radius: 999px; 181 | text-shadow: none; 182 | box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); 183 | } 184 | 185 | pre[data-line] .line-highlight[data-end]:after { 186 | content: attr(data-end); 187 | top: auto; 188 | bottom: .4em; 189 | } 190 | -------------------------------------------------------------------------------- /dist/code-themes/base16-ateliersulphurpool.light.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: Base16 Atelier Sulphurpool Light 4 | Author: Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool) 5 | 6 | Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/) 7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) 8 | 9 | */ 10 | code[class*="language-"], 11 | pre[class*="language-"] { 12 | font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; 13 | font-size: 14px; 14 | line-height: 1.375; 15 | direction: ltr; 16 | text-align: left; 17 | white-space: pre; 18 | word-spacing: normal; 19 | word-break: normal; 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | background: #f5f7ff; 28 | color: #5e6687; 29 | } 30 | 31 | pre > code[class*="language-"] { 32 | font-size: 1em; 33 | } 34 | 35 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 36 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 37 | text-shadow: none; 38 | background: #dfe2f1; 39 | } 40 | 41 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 42 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 43 | text-shadow: none; 44 | background: #dfe2f1; 45 | } 46 | 47 | /* Code blocks */ 48 | pre[class*="language-"] { 49 | padding: 1em; 50 | margin: .5em 0; 51 | overflow: auto; 52 | } 53 | 54 | /* Inline code */ 55 | :not(pre) > code[class*="language-"] { 56 | padding: .1em; 57 | border-radius: .3em; 58 | } 59 | 60 | .token.comment, 61 | .token.prolog, 62 | .token.doctype, 63 | .token.cdata { 64 | color: #898ea4; 65 | } 66 | 67 | .token.punctuation { 68 | color: #5e6687; 69 | } 70 | 71 | .token.namespace { 72 | opacity: .7; 73 | } 74 | 75 | .token.operator, 76 | .token.boolean, 77 | .token.number { 78 | color: #c76b29; 79 | } 80 | 81 | .token.property { 82 | color: #c08b30; 83 | } 84 | 85 | .token.tag { 86 | color: #3d8fd1; 87 | } 88 | 89 | .token.string { 90 | color: #22a2c9; 91 | } 92 | 93 | .token.selector { 94 | color: #6679cc; 95 | } 96 | 97 | .token.attr-name { 98 | color: #c76b29; 99 | } 100 | 101 | .token.entity, 102 | .token.url, 103 | .language-css .token.string, 104 | .style .token.string { 105 | color: #22a2c9; 106 | } 107 | 108 | .token.attr-value, 109 | .token.keyword, 110 | .token.control, 111 | .token.directive, 112 | .token.unit { 113 | color: #ac9739; 114 | } 115 | 116 | .token.statement, 117 | .token.regex, 118 | .token.atrule { 119 | color: #22a2c9; 120 | } 121 | 122 | .token.placeholder, 123 | .token.variable { 124 | color: #3d8fd1; 125 | } 126 | 127 | .token.deleted { 128 | text-decoration: line-through; 129 | } 130 | 131 | .token.inserted { 132 | border-bottom: 1px dotted #202746; 133 | text-decoration: none; 134 | } 135 | 136 | .token.italic { 137 | font-style: italic; 138 | } 139 | 140 | .token.important, 141 | .token.bold { 142 | font-weight: bold; 143 | } 144 | 145 | .token.important { 146 | color: #c94922; 147 | } 148 | 149 | .token.entity { 150 | cursor: help; 151 | } 152 | 153 | pre > code.highlight { 154 | outline: 0.4em solid #c94922; 155 | outline-offset: .4em; 156 | } 157 | 158 | /* overrides color-values for the Line Numbers plugin 159 | * http://prismjs.com/plugins/line-numbers/ 160 | */ 161 | .line-numbers .line-numbers-rows { 162 | border-right-color: #dfe2f1; 163 | } 164 | 165 | .line-numbers-rows > span:before { 166 | color: #979db4; 167 | } 168 | 169 | /* overrides color-values for the Line Highlight plugin 170 | * http://prismjs.com/plugins/line-highlight/ 171 | */ 172 | .line-highlight { 173 | background: rgba(107, 115, 148, 0.2); 174 | background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); 175 | background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0)); 176 | } 177 | -------------------------------------------------------------------------------- /dist/code-themes/duotone-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Duotone Light 3 | Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) 4 | 5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css) 6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; 12 | font-size: 14px; 13 | line-height: 1.375; 14 | direction: ltr; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | background: #faf8f5; 29 | color: #728fcb; 30 | } 31 | 32 | pre > code[class*="language-"] { 33 | font-size: 1em; 34 | } 35 | 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 38 | text-shadow: none; 39 | background: #faf8f5; 40 | } 41 | 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 44 | text-shadow: none; 45 | background: #faf8f5; 46 | } 47 | 48 | /* Code blocks */ 49 | pre[class*="language-"] { 50 | padding: 1em; 51 | margin: .5em 0; 52 | overflow: auto; 53 | } 54 | 55 | /* Inline code */ 56 | :not(pre) > code[class*="language-"] { 57 | padding: .1em; 58 | border-radius: .3em; 59 | } 60 | 61 | .token.comment, 62 | .token.prolog, 63 | .token.doctype, 64 | .token.cdata { 65 | color: #b6ad9a; 66 | } 67 | 68 | .token.punctuation { 69 | color: #b6ad9a; 70 | } 71 | 72 | .token.namespace { 73 | opacity: .7; 74 | } 75 | 76 | .token.tag, 77 | .token.operator, 78 | .token.number { 79 | color: #063289; 80 | } 81 | 82 | .token.property, 83 | .token.function { 84 | color: #b29762; 85 | } 86 | 87 | .token.tag-id, 88 | .token.selector, 89 | .token.atrule-id { 90 | color: #2d2006; 91 | } 92 | 93 | code.language-javascript, 94 | .token.attr-name { 95 | color: #896724; 96 | } 97 | 98 | code.language-css, 99 | code.language-scss, 100 | .token.boolean, 101 | .token.string, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .language-scss .token.string, 106 | .style .token.string, 107 | .token.attr-value, 108 | .token.keyword, 109 | .token.control, 110 | .token.directive, 111 | .token.unit, 112 | .token.statement, 113 | .token.regex, 114 | .token.atrule { 115 | color: #728fcb; 116 | } 117 | 118 | .token.placeholder, 119 | .token.variable { 120 | color: #93abdc; 121 | } 122 | 123 | .token.deleted { 124 | text-decoration: line-through; 125 | } 126 | 127 | .token.inserted { 128 | border-bottom: 1px dotted #2d2006; 129 | text-decoration: none; 130 | } 131 | 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.important, 137 | .token.bold { 138 | font-weight: bold; 139 | } 140 | 141 | .token.important { 142 | color: #896724; 143 | } 144 | 145 | .token.entity { 146 | cursor: help; 147 | } 148 | 149 | pre > code.highlight { 150 | outline: .4em solid #896724; 151 | outline-offset: .4em; 152 | } 153 | 154 | /* overrides color-values for the Line Numbers plugin 155 | * http://prismjs.com/plugins/line-numbers/ 156 | */ 157 | .line-numbers .line-numbers-rows { 158 | border-right-color: #ece8de; 159 | } 160 | 161 | .line-numbers-rows > span:before { 162 | color: #cdc4b1; 163 | } 164 | 165 | /* overrides color-values for the Line Highlight plugin 166 | * http://prismjs.com/plugins/line-highlight/ 167 | */ 168 | .line-highlight { 169 | background: rgba(45, 32, 6, 0.2); 170 | background: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0)); 171 | background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0)); 172 | } 173 | -------------------------------------------------------------------------------- /dist/code-themes/duotone-dark.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Duotone Dark 3 | Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) 4 | 5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-evening-dark.css) 6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; 12 | font-size: 14px; 13 | line-height: 1.375; 14 | direction: ltr; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | background: #2a2734; 29 | color: #9a86fd; 30 | } 31 | 32 | pre > code[class*="language-"] { 33 | font-size: 1em; 34 | } 35 | 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 38 | text-shadow: none; 39 | background: #6a51e6; 40 | } 41 | 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 44 | text-shadow: none; 45 | background: #6a51e6; 46 | } 47 | 48 | /* Code blocks */ 49 | pre[class*="language-"] { 50 | padding: 1em; 51 | margin: .5em 0; 52 | overflow: auto; 53 | } 54 | 55 | /* Inline code */ 56 | :not(pre) > code[class*="language-"] { 57 | padding: .1em; 58 | border-radius: .3em; 59 | } 60 | 61 | .token.comment, 62 | .token.prolog, 63 | .token.doctype, 64 | .token.cdata { 65 | color: #6c6783; 66 | } 67 | 68 | .token.punctuation { 69 | color: #6c6783; 70 | } 71 | 72 | .token.namespace { 73 | opacity: .7; 74 | } 75 | 76 | .token.tag, 77 | .token.operator, 78 | .token.number { 79 | color: #e09142; 80 | } 81 | 82 | .token.property, 83 | .token.function { 84 | color: #9a86fd; 85 | } 86 | 87 | .token.tag-id, 88 | .token.selector, 89 | .token.atrule-id { 90 | color: #eeebff; 91 | } 92 | 93 | code.language-javascript, 94 | .token.attr-name { 95 | color: #c4b9fe; 96 | } 97 | 98 | code.language-css, 99 | code.language-scss, 100 | .token.boolean, 101 | .token.string, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .language-scss .token.string, 106 | .style .token.string, 107 | .token.attr-value, 108 | .token.keyword, 109 | .token.control, 110 | .token.directive, 111 | .token.unit, 112 | .token.statement, 113 | .token.regex, 114 | .token.atrule { 115 | color: #ffcc99; 116 | } 117 | 118 | .token.placeholder, 119 | .token.variable { 120 | color: #ffcc99; 121 | } 122 | 123 | .token.deleted { 124 | text-decoration: line-through; 125 | } 126 | 127 | .token.inserted { 128 | border-bottom: 1px dotted #eeebff; 129 | text-decoration: none; 130 | } 131 | 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.important, 137 | .token.bold { 138 | font-weight: bold; 139 | } 140 | 141 | .token.important { 142 | color: #c4b9fe; 143 | } 144 | 145 | .token.entity { 146 | cursor: help; 147 | } 148 | 149 | pre > code.highlight { 150 | outline: .4em solid #8a75f5; 151 | outline-offset: .4em; 152 | } 153 | 154 | /* overrides color-values for the Line Numbers plugin 155 | * http://prismjs.com/plugins/line-numbers/ 156 | */ 157 | .line-numbers .line-numbers-rows { 158 | border-right-color: #2c2937; 159 | } 160 | 161 | .line-numbers-rows > span:before { 162 | color: #3c3949; 163 | } 164 | 165 | /* overrides color-values for the Line Highlight plugin 166 | * http://prismjs.com/plugins/line-highlight/ 167 | */ 168 | .line-highlight { 169 | background: rgba(224, 145, 66, 0.2); 170 | background: -webkit-linear-gradient(left, rgba(224, 145, 66, 0.2) 70%, rgba(224, 145, 66, 0)); 171 | background: linear-gradient(to right, rgba(224, 145, 66, 0.2) 70%, rgba(224, 145, 66, 0)); 172 | } 173 | -------------------------------------------------------------------------------- /dist/code-themes/duotone-earth.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Duotone Earth 3 | Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) 4 | 5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-earth-dark.css) 6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; 12 | font-size: 14px; 13 | line-height: 1.375; 14 | direction: ltr; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | background: #322d29; 29 | color: #88786d; 30 | } 31 | 32 | pre > code[class*="language-"] { 33 | font-size: 1em; 34 | } 35 | 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 38 | text-shadow: none; 39 | background: #6f5849; 40 | } 41 | 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 44 | text-shadow: none; 45 | background: #6f5849; 46 | } 47 | 48 | /* Code blocks */ 49 | pre[class*="language-"] { 50 | padding: 1em; 51 | margin: .5em 0; 52 | overflow: auto; 53 | } 54 | 55 | /* Inline code */ 56 | :not(pre) > code[class*="language-"] { 57 | padding: .1em; 58 | border-radius: .3em; 59 | } 60 | 61 | .token.comment, 62 | .token.prolog, 63 | .token.doctype, 64 | .token.cdata { 65 | color: #6a5f58; 66 | } 67 | 68 | .token.punctuation { 69 | color: #6a5f58; 70 | } 71 | 72 | .token.namespace { 73 | opacity: .7; 74 | } 75 | 76 | .token.tag, 77 | .token.operator, 78 | .token.number { 79 | color: #bfa05a; 80 | } 81 | 82 | .token.property, 83 | .token.function { 84 | color: #88786d; 85 | } 86 | 87 | .token.tag-id, 88 | .token.selector, 89 | .token.atrule-id { 90 | color: #fff3eb; 91 | } 92 | 93 | code.language-javascript, 94 | .token.attr-name { 95 | color: #a48774; 96 | } 97 | 98 | code.language-css, 99 | code.language-scss, 100 | .token.boolean, 101 | .token.string, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .language-scss .token.string, 106 | .style .token.string, 107 | .token.attr-value, 108 | .token.keyword, 109 | .token.control, 110 | .token.directive, 111 | .token.unit, 112 | .token.statement, 113 | .token.regex, 114 | .token.atrule { 115 | color: #fcc440; 116 | } 117 | 118 | .token.placeholder, 119 | .token.variable { 120 | color: #fcc440; 121 | } 122 | 123 | .token.deleted { 124 | text-decoration: line-through; 125 | } 126 | 127 | .token.inserted { 128 | border-bottom: 1px dotted #fff3eb; 129 | text-decoration: none; 130 | } 131 | 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.important, 137 | .token.bold { 138 | font-weight: bold; 139 | } 140 | 141 | .token.important { 142 | color: #a48774; 143 | } 144 | 145 | .token.entity { 146 | cursor: help; 147 | } 148 | 149 | pre > code.highlight { 150 | outline: .4em solid #816d5f; 151 | outline-offset: .4em; 152 | } 153 | 154 | /* overrides color-values for the Line Numbers plugin 155 | * http://prismjs.com/plugins/line-numbers/ 156 | */ 157 | .line-numbers .line-numbers-rows { 158 | border-right-color: #35302b; 159 | } 160 | 161 | .line-numbers-rows > span:before { 162 | color: #46403d; 163 | } 164 | 165 | /* overrides color-values for the Line Highlight plugin 166 | * http://prismjs.com/plugins/line-highlight/ 167 | */ 168 | .line-highlight { 169 | background: rgba(191, 160, 90, 0.2); 170 | background: -webkit-linear-gradient(left, rgba(191, 160, 90, 0.2) 70%, rgba(191, 160, 90, 0)); 171 | background: linear-gradient(to right, rgba(191, 160, 90, 0.2) 70%, rgba(191, 160, 90, 0)); 172 | } 173 | -------------------------------------------------------------------------------- /dist/code-themes/duotone-space.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Duotone Space 3 | Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) 4 | 5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-space-dark.css) 6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; 12 | font-size: 14px; 13 | line-height: 1.375; 14 | direction: ltr; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | background: #24242e; 29 | color: #767693; 30 | } 31 | 32 | pre > code[class*="language-"] { 33 | font-size: 1em; 34 | } 35 | 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 38 | text-shadow: none; 39 | background: #5151e6; 40 | } 41 | 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 44 | text-shadow: none; 45 | background: #5151e6; 46 | } 47 | 48 | /* Code blocks */ 49 | pre[class*="language-"] { 50 | padding: 1em; 51 | margin: .5em 0; 52 | overflow: auto; 53 | } 54 | 55 | /* Inline code */ 56 | :not(pre) > code[class*="language-"] { 57 | padding: .1em; 58 | border-radius: .3em; 59 | } 60 | 61 | .token.comment, 62 | .token.prolog, 63 | .token.doctype, 64 | .token.cdata { 65 | color: #5b5b76; 66 | } 67 | 68 | .token.punctuation { 69 | color: #5b5b76; 70 | } 71 | 72 | .token.namespace { 73 | opacity: .7; 74 | } 75 | 76 | .token.tag, 77 | .token.operator, 78 | .token.number { 79 | color: #dd672c; 80 | } 81 | 82 | .token.property, 83 | .token.function { 84 | color: #767693; 85 | } 86 | 87 | .token.tag-id, 88 | .token.selector, 89 | .token.atrule-id { 90 | color: #ebebff; 91 | } 92 | 93 | code.language-javascript, 94 | .token.attr-name { 95 | color: #aaaaca; 96 | } 97 | 98 | code.language-css, 99 | code.language-scss, 100 | .token.boolean, 101 | .token.string, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .language-scss .token.string, 106 | .style .token.string, 107 | .token.attr-value, 108 | .token.keyword, 109 | .token.control, 110 | .token.directive, 111 | .token.unit, 112 | .token.statement, 113 | .token.regex, 114 | .token.atrule { 115 | color: #fe8c52; 116 | } 117 | 118 | .token.placeholder, 119 | .token.variable { 120 | color: #fe8c52; 121 | } 122 | 123 | .token.deleted { 124 | text-decoration: line-through; 125 | } 126 | 127 | .token.inserted { 128 | border-bottom: 1px dotted #ebebff; 129 | text-decoration: none; 130 | } 131 | 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.important, 137 | .token.bold { 138 | font-weight: bold; 139 | } 140 | 141 | .token.important { 142 | color: #aaaaca; 143 | } 144 | 145 | .token.entity { 146 | cursor: help; 147 | } 148 | 149 | pre > code.highlight { 150 | outline: .4em solid #7676f4; 151 | outline-offset: .4em; 152 | } 153 | 154 | /* overrides color-values for the Line Numbers plugin 155 | * http://prismjs.com/plugins/line-numbers/ 156 | */ 157 | .line-numbers .line-numbers-rows { 158 | border-right-color: #262631; 159 | } 160 | 161 | .line-numbers-rows > span:before { 162 | color: #393949; 163 | } 164 | 165 | /* overrides color-values for the Line Highlight plugin 166 | * http://prismjs.com/plugins/line-highlight/ 167 | */ 168 | .line-highlight { 169 | background: rgba(221, 103, 44, 0.2); 170 | background: -webkit-linear-gradient(left, rgba(221, 103, 44, 0.2) 70%, rgba(221, 103, 44, 0)); 171 | background: linear-gradient(to right, rgba(221, 103, 44, 0.2) 70%, rgba(221, 103, 44, 0)); 172 | } 173 | -------------------------------------------------------------------------------- /dist/code-themes/duotone-forest.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Duotone Forest 3 | Author: by Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) 4 | 5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-forest-dark.css) 6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; 12 | font-size: 14px; 13 | line-height: 1.375; 14 | direction: ltr; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | background: #2a2d2a; 29 | color: #687d68; 30 | } 31 | 32 | pre > code[class*="language-"] { 33 | font-size: 1em; 34 | } 35 | 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 38 | text-shadow: none; 39 | background: #435643; 40 | } 41 | 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 44 | text-shadow: none; 45 | background: #435643; 46 | } 47 | 48 | /* Code blocks */ 49 | pre[class*="language-"] { 50 | padding: 1em; 51 | margin: .5em 0; 52 | overflow: auto; 53 | } 54 | 55 | /* Inline code */ 56 | :not(pre) > code[class*="language-"] { 57 | padding: .1em; 58 | border-radius: .3em; 59 | } 60 | 61 | .token.comment, 62 | .token.prolog, 63 | .token.doctype, 64 | .token.cdata { 65 | color: #535f53; 66 | } 67 | 68 | .token.punctuation { 69 | color: #535f53; 70 | } 71 | 72 | .token.namespace { 73 | opacity: .7; 74 | } 75 | 76 | .token.tag, 77 | .token.operator, 78 | .token.number { 79 | color: #a2b34d; 80 | } 81 | 82 | .token.property, 83 | .token.function { 84 | color: #687d68; 85 | } 86 | 87 | .token.tag-id, 88 | .token.selector, 89 | .token.atrule-id { 90 | color: #f0fff0; 91 | } 92 | 93 | code.language-javascript, 94 | .token.attr-name { 95 | color: #b3d6b3; 96 | } 97 | 98 | code.language-css, 99 | code.language-scss, 100 | .token.boolean, 101 | .token.string, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .language-scss .token.string, 106 | .style .token.string, 107 | .token.attr-value, 108 | .token.keyword, 109 | .token.control, 110 | .token.directive, 111 | .token.unit, 112 | .token.statement, 113 | .token.regex, 114 | .token.atrule { 115 | color: #e5fb79; 116 | } 117 | 118 | .token.placeholder, 119 | .token.variable { 120 | color: #e5fb79; 121 | } 122 | 123 | .token.deleted { 124 | text-decoration: line-through; 125 | } 126 | 127 | .token.inserted { 128 | border-bottom: 1px dotted #f0fff0; 129 | text-decoration: none; 130 | } 131 | 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.important, 137 | .token.bold { 138 | font-weight: bold; 139 | } 140 | 141 | .token.important { 142 | color: #b3d6b3; 143 | } 144 | 145 | .token.entity { 146 | cursor: help; 147 | } 148 | 149 | pre > code.highlight { 150 | outline: .4em solid #5c705c; 151 | outline-offset: .4em; 152 | } 153 | 154 | /* overrides color-values for the Line Numbers plugin 155 | * http://prismjs.com/plugins/line-numbers/ 156 | */ 157 | .line-numbers .line-numbers-rows { 158 | border-right-color: #2c302c; 159 | } 160 | 161 | .line-numbers-rows > span:before { 162 | color: #3b423b; 163 | } 164 | 165 | /* overrides color-values for the Line Highlight plugin 166 | * http://prismjs.com/plugins/line-highlight/ 167 | */ 168 | .line-highlight { 169 | background: rgba(162, 179, 77, 0.2); 170 | background: -webkit-linear-gradient(left, rgba(162, 179, 77, 0.2) 70%, rgba(162, 179, 77, 0)); 171 | background: linear-gradient(to right, rgba(162, 179, 77, 0.2) 70%, rgba(162, 179, 77, 0)); 172 | } 173 | -------------------------------------------------------------------------------- /dist/code-themes/duotone-sea.css: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Duotone Sea 3 | Author: by Simurai, adapted from DuoTone themes by Simurai for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) 4 | 5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-sea-dark.css) 6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; 12 | font-size: 14px; 13 | line-height: 1.375; 14 | direction: ltr; 15 | text-align: left; 16 | white-space: pre; 17 | word-spacing: normal; 18 | word-break: normal; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | background: #1d262f; 29 | color: #57718e; 30 | } 31 | 32 | pre > code[class*="language-"] { 33 | font-size: 1em; 34 | } 35 | 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 38 | text-shadow: none; 39 | background: #004a9e; 40 | } 41 | 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 44 | text-shadow: none; 45 | background: #004a9e; 46 | } 47 | 48 | /* Code blocks */ 49 | pre[class*="language-"] { 50 | padding: 1em; 51 | margin: .5em 0; 52 | overflow: auto; 53 | } 54 | 55 | /* Inline code */ 56 | :not(pre) > code[class*="language-"] { 57 | padding: .1em; 58 | border-radius: .3em; 59 | } 60 | 61 | .token.comment, 62 | .token.prolog, 63 | .token.doctype, 64 | .token.cdata { 65 | color: #4a5f78; 66 | } 67 | 68 | .token.punctuation { 69 | color: #4a5f78; 70 | } 71 | 72 | .token.namespace { 73 | opacity: .7; 74 | } 75 | 76 | .token.tag, 77 | .token.operator, 78 | .token.number { 79 | color: #0aa370; 80 | } 81 | 82 | .token.property, 83 | .token.function { 84 | color: #57718e; 85 | } 86 | 87 | .token.tag-id, 88 | .token.selector, 89 | .token.atrule-id { 90 | color: #ebf4ff; 91 | } 92 | 93 | code.language-javascript, 94 | .token.attr-name { 95 | color: #7eb6f6; 96 | } 97 | 98 | code.language-css, 99 | code.language-scss, 100 | .token.boolean, 101 | .token.string, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .language-scss .token.string, 106 | .style .token.string, 107 | .token.attr-value, 108 | .token.keyword, 109 | .token.control, 110 | .token.directive, 111 | .token.unit, 112 | .token.statement, 113 | .token.regex, 114 | .token.atrule { 115 | color: #47ebb4; 116 | } 117 | 118 | .token.placeholder, 119 | .token.variable { 120 | color: #47ebb4; 121 | } 122 | 123 | .token.deleted { 124 | text-decoration: line-through; 125 | } 126 | 127 | .token.inserted { 128 | border-bottom: 1px dotted #ebf4ff; 129 | text-decoration: none; 130 | } 131 | 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.important, 137 | .token.bold { 138 | font-weight: bold; 139 | } 140 | 141 | .token.important { 142 | color: #7eb6f6; 143 | } 144 | 145 | .token.entity { 146 | cursor: help; 147 | } 148 | 149 | pre > code.highlight { 150 | outline: .4em solid #34659d; 151 | outline-offset: .4em; 152 | } 153 | 154 | /* overrides color-values for the Line Numbers plugin 155 | * http://prismjs.com/plugins/line-numbers/ 156 | */ 157 | .line-numbers .line-numbers-rows { 158 | border-right-color: #1f2932; 159 | } 160 | 161 | .line-numbers-rows > span:before { 162 | color: #2c3847; 163 | } 164 | 165 | /* overrides color-values for the Line Highlight plugin 166 | * http://prismjs.com/plugins/line-highlight/ 167 | */ 168 | .line-highlight { 169 | background: rgba(10, 163, 112, 0.2); 170 | background: -webkit-linear-gradient(left, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0)); 171 | background: linear-gradient(to right, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0)); 172 | } 173 | -------------------------------------------------------------------------------- /dist/code-themes/vsc-dark-plus.css: -------------------------------------------------------------------------------- 1 | pre[class*="language-"], 2 | code[class*="language-"] { 3 | color: #d4d4d4; 4 | font-size: 13px; 5 | text-shadow: none; 6 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 7 | direction: ltr; 8 | text-align: left; 9 | white-space: pre; 10 | word-spacing: normal; 11 | word-break: normal; 12 | line-height: 1.5; 13 | -moz-tab-size: 4; 14 | -o-tab-size: 4; 15 | tab-size: 4; 16 | -webkit-hyphens: none; 17 | -moz-hyphens: none; 18 | -ms-hyphens: none; 19 | hyphens: none; 20 | } 21 | 22 | pre[class*="language-"]::selection, 23 | code[class*="language-"]::selection { 24 | text-shadow: none; 25 | background: #b3d4fc; 26 | } 27 | 28 | @media print { 29 | pre[class*="language-"], 30 | code[class*="language-"] { 31 | text-shadow: none; 32 | } 33 | } 34 | 35 | pre[class*="language-"] { 36 | padding: 1em; 37 | margin: .5em 0; 38 | overflow: auto; 39 | background: #1e1e1e; 40 | } 41 | 42 | :not(pre) > code[class*="language-"] { 43 | padding: .1em .3em; 44 | border-radius: .3em; 45 | color: #db4c69; 46 | background: #f9f2f4; 47 | } 48 | /********************************************************* 49 | * Tokens 50 | */ 51 | .namespace { 52 | opacity: .7; 53 | } 54 | 55 | .token.comment, 56 | .token.prolog, 57 | .token.doctype, 58 | .token.cdata { 59 | color: #6a9955; 60 | } 61 | 62 | .token.punctuation { 63 | color: #d4d4d4; 64 | } 65 | 66 | .token.property, 67 | .token.tag, 68 | .token.boolean, 69 | .token.number, 70 | .token.constant, 71 | .token.symbol, 72 | .token.deleted { 73 | color: #b5cea8; 74 | } 75 | 76 | .token.selector, 77 | .token.attr-name, 78 | .token.string, 79 | .token.char, 80 | .token.builtin, 81 | .token.inserted { 82 | color: #ce9178; 83 | } 84 | 85 | .token.operator, 86 | .token.entity, 87 | .token.url, 88 | .language-css .token.string, 89 | .style .token.string { 90 | color: #d4d4d4; 91 | background: #1e1e1e; 92 | } 93 | 94 | .token.atrule, 95 | .token.attr-value, 96 | .token.keyword { 97 | color: #c586c0; 98 | } 99 | 100 | .token.function { 101 | color: #dcdcaa; 102 | } 103 | 104 | .token.regex, 105 | .token.important, 106 | .token.variable { 107 | color: #d16969; 108 | } 109 | 110 | .token.important, 111 | .token.bold { 112 | font-weight: bold; 113 | } 114 | 115 | .token.italic { 116 | font-style: italic; 117 | } 118 | 119 | .token.constant { 120 | color: #9CDCFE; 121 | } 122 | 123 | .token.class-name { 124 | color: #4EC9B0; 125 | } 126 | 127 | .token.parameter { 128 | color: #9CDCFE; 129 | } 130 | 131 | .token.interpolation { 132 | color: #9CDCFE; 133 | } 134 | 135 | .token.punctuation.interpolation-punctuation { 136 | color: #569cd6; 137 | } 138 | 139 | .token.boolean { 140 | color: #569cd6; 141 | } 142 | 143 | .token.property { 144 | color: #9cdcfe; 145 | } 146 | 147 | .token.selector { 148 | color: #d7ba7d; 149 | } 150 | 151 | .token.tag { 152 | color: #569cd6; 153 | } 154 | 155 | .token.attr-name { 156 | color: #9cdcfe; 157 | } 158 | 159 | .token.attr-value { 160 | color: #ce9178; 161 | } 162 | 163 | .token.entity { 164 | color: #4ec9b0; 165 | cursor: unset; 166 | } 167 | 168 | .token.namespace { 169 | color: #4ec9b0; 170 | } 171 | /********************************************************* 172 | * Language Specific 173 | */ 174 | pre[class*="language-javascript"], 175 | code[class*="language-javascript"] { 176 | color: #4ec9b0; 177 | } 178 | 179 | pre[class*="language-css"], 180 | code[class*="language-css"] { 181 | color: #CE9178; 182 | } 183 | 184 | pre[class*="language-html"], 185 | code[class*="language-html"] { 186 | color: #d4d4d4; 187 | } 188 | 189 | .language-html .token.punctuation { 190 | color: #808080; 191 | } 192 | /********************************************************* 193 | * Line highlighting 194 | */ 195 | pre[data-line] { 196 | position: relative; 197 | } 198 | 199 | pre[class*="language-"] > code[class*="language-"] { 200 | position: relative; 201 | z-index: 1; 202 | } 203 | 204 | .line-highlight { 205 | position: absolute; 206 | left: 0; 207 | right: 0; 208 | padding: inherit 0; 209 | margin-top: 1em; 210 | background: #f7ebc6; 211 | box-shadow: inset 5px 0 0 #f7d87c; 212 | z-index: 0; 213 | pointer-events: none; 214 | line-height: inherit; 215 | white-space: pre; 216 | } 217 | -------------------------------------------------------------------------------- /dist/code-themes/shades-of-purple.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Shades of Purple Theme for Prism.js 3 | * 4 | * @author Ahmad Awais 5 | * @support Follow/tweet at https://twitter.com/MrAhmadAwais/ 6 | */ 7 | 8 | code[class*='language-'], 9 | pre[class*='language-'] { 10 | color: #9efeff; 11 | direction: ltr; 12 | text-align: left; 13 | white-space: pre; 14 | word-spacing: normal; 15 | word-break: normal; 16 | 17 | -moz-tab-size: 4; 18 | -o-tab-size: 4; 19 | tab-size: 4; 20 | 21 | -webkit-hyphens: none; 22 | -moz-hyphens: none; 23 | -ms-hyphens: none; 24 | hyphens: none; 25 | 26 | font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 27 | font-weight: 400; 28 | font-size: 17px; 29 | line-height: 25px; 30 | letter-spacing: 0.5px; 31 | text-shadow: 0 1px #222245; 32 | } 33 | 34 | pre[class*='language-']::-moz-selection, 35 | pre[class*='language-'] ::-moz-selection, 36 | code[class*='language-']::-moz-selection, 37 | code[class*='language-'] ::-moz-selection, 38 | pre[class*='language-']::selection, 39 | pre[class*='language-'] ::selection, 40 | code[class*='language-']::selection, 41 | code[class*='language-'] ::selection { 42 | color: inherit; 43 | background: #a599e9; 44 | } 45 | 46 | /* Code blocks. */ 47 | pre[class*='language-'] { 48 | padding: 2em; 49 | margin: 0.5em 0; 50 | overflow: auto; 51 | } 52 | 53 | :not(pre) > code[class*='language-'], 54 | pre[class*='language-'] { 55 | background: #1e1e3f; 56 | } 57 | 58 | /* Inline code */ 59 | :not(pre) > code[class*='language-'] { 60 | padding: 0.1em; 61 | border-radius: 0.3em; 62 | } 63 | 64 | .token { 65 | font-weight: 400; 66 | } 67 | 68 | .token.comment, 69 | .token.prolog, 70 | .token.cdata { 71 | color: #b362ff; 72 | } 73 | 74 | .token.delimiter, 75 | .token.keyword, 76 | .token.selector, 77 | .token.important, 78 | .token.atrule { 79 | color: #ff9d00; 80 | } 81 | 82 | .token.operator, 83 | .token.attr-name { 84 | color: rgb(255, 180, 84); 85 | } 86 | 87 | .token.punctuation { 88 | color: #ffffff; 89 | } 90 | 91 | .token.boolean { 92 | color: rgb(255, 98, 140); 93 | } 94 | 95 | .token.tag, 96 | .token.tag .punctuation, 97 | .token.doctype, 98 | .token.builtin { 99 | color: rgb(255, 157, 0); 100 | } 101 | 102 | .token.entity, 103 | .token.symbol { 104 | color: #6897bb; 105 | } 106 | 107 | .token.number { 108 | color: #ff628c; 109 | } 110 | 111 | .token.property, 112 | .token.constant, 113 | .token.variable { 114 | color: #ff628c; 115 | } 116 | 117 | .token.string, 118 | .token.char { 119 | color: #a5ff90; 120 | } 121 | 122 | .token.attr-value, 123 | .token.attr-value .punctuation { 124 | color: #a5c261; 125 | } 126 | 127 | .token.attr-value .punctuation:first-child { 128 | color: #a9b7c6; 129 | } 130 | 131 | .token.url { 132 | color: #287bde; 133 | text-decoration: underline; 134 | } 135 | 136 | .token.function { 137 | color: rgb(250, 208, 0); 138 | } 139 | 140 | .token.regex { 141 | background: #364135; 142 | } 143 | 144 | .token.bold { 145 | font-weight: bold; 146 | } 147 | 148 | .token.italic { 149 | font-style: italic; 150 | } 151 | 152 | .token.inserted { 153 | background: #00ff00; 154 | } 155 | 156 | .token.deleted { 157 | background: #ff000d; 158 | } 159 | 160 | code.language-css .token.property, 161 | code.language-css .token.property + .token.punctuation { 162 | color: #a9b7c6; 163 | } 164 | 165 | code.language-css .token.id { 166 | color: #ffc66d; 167 | } 168 | 169 | code.language-css .token.selector > .token.class, 170 | code.language-css .token.selector > .token.attribute, 171 | code.language-css .token.selector > .token.pseudo-class, 172 | code.language-css .token.selector > .token.pseudo-element { 173 | color: #ffc66d; 174 | } 175 | 176 | .token.class-name { 177 | color: #fb94ff; 178 | } 179 | 180 | .token.operator, 181 | .token.entity, 182 | .token.url, 183 | .language-css .token.string, 184 | .style .token.string { 185 | background: none; 186 | } 187 | 188 | pre .line-highlight, 189 | pre .line-highlight.line-highlight, 190 | pre > code.line-highlight { 191 | margin-top: 36px; 192 | background: linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent); 193 | } 194 | 195 | pre .line-highlight:before, 196 | pre > code.line-highlight:before, 197 | pre .line-highlight[data-end]:after, 198 | pre > code.line-highlight[data-end]:after { 199 | content: ''; 200 | } 201 | -------------------------------------------------------------------------------- /dist/code-themes/pojoaque.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Pojoaque Style by Jason Tate 3 | * http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html 4 | * Based on Solarized Style from http://ethanschoonover.com/solarized 5 | * http://softwaremaniacs.org/media/soft/highlight/test.html 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | -moz-tab-size: 4; 11 | -o-tab-size: 4; 12 | tab-size: 4; 13 | -webkit-hyphens: none; 14 | -moz-hyphens: none; 15 | -ms-hyphens: none; 16 | hyphens: none; 17 | white-space: pre; 18 | white-space: pre-wrap; 19 | word-break: break-all; 20 | word-wrap: break-word; 21 | font-family: Menlo, Monaco, "Courier New", monospace; 22 | font-size: 15px; 23 | line-height: 1.5; 24 | color: #dccf8f; 25 | text-shadow: 0; 26 | } 27 | 28 | pre > code[class*="language-"] { 29 | font-size: 1em; 30 | } 31 | 32 | pre[class*="language-"], 33 | :not(pre) > code[class*="language-"] { 34 | border-radius: 5px; 35 | border: 1px solid #000; 36 | color: #DCCF8F; 37 | background: #181914 url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAMAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQACQYGBgcGCQcHCQ0IBwgNDwsJCQsPEQ4ODw4OERENDg4ODg0RERQUFhQUERoaHBwaGiYmJiYmKysrKysrKysrKwEJCAgJCgkMCgoMDwwODA8TDg4ODhMVDg4PDg4VGhMRERERExoXGhYWFhoXHR0aGh0dJCQjJCQrKysrKysrKysr/8AAEQgAjACMAwEiAAIRAQMRAf/EAF4AAQEBAAAAAAAAAAAAAAAAAAABBwEBAQAAAAAAAAAAAAAAAAAAAAIQAAEDAwIHAQEAAAAAAAAAAADwAREhYaExkUFRcYGxwdHh8REBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AyGFEjHaBS2fDDs2zkhKmBKktb7km+ZwwCnXPkLVmCTMItj6AXFxRS465/BTnkAJvkLkJe+7AKKoi2AtRS2zuAWsCb5GOlBN8gKfmuGHZ8MFqIth3ALmFoFwbwKWyAlTAp17uKqBvgBD8sM4fTjhvAhkzhaRkBMKBrfs7jGPIpzy7gFrAqnC0C0gB0EWwBDW2cBVQwm+QtPpa3wBO3sVvszCnLAhkzgL5/RLf13cLQd8/AGlu0Cb5HTx9KuAEieGJEdcehS3eRTp2ATdt3CpIm+QtZwAhROXFeb7swp/ahaM3kBE/jSIUBc/AWrgBN8uNFAl+b7sAXFxFn2YLUU5Ns7gFX8C4ib+hN8gFWXwK3bZglxEJm+gKdciLPsFV/TClsgJUwKJ5FVA7tvIFrfZhVfGJDcsCKaYgAqv6YRbE+RWOWBtu7+AL3yRalXLyKqAIIfk+zARbDgFyEsncYwJvlgFRW+GEWntIi2P0BooyFxcNr8Ep3+ANLbMO+QyhvbiqdgC0kVvgUUiLYgBS2QtPbiVI1/sgOmG9uO+Y8DW+7jS2zAOnj6O2BndwuIAUtkdRN8gFoK3wwXMQyZwHVbClsuNLd4E3yAUR6FVDBR+BafQGt93LVMxJTv8ABts4CVLhcfYWsCb5kC9/BHdU8CLYFY5bMAd+eX9MGthhpbA1vu4B7+RKkaW2Yq4AQtVBBFsAJU/AuIXBhN8gGWnstefhiZyWvLAEnbYS1uzSFP6Jvn4Baxx70JKkQojLib5AVTey1jjgkKJGO0AKWyOm7N7cSpgSpAdPH0Tfd/gp1z5C1ZgKqN9J2wFxcUUuAFLZAm+QC0Fb4YUVRFsAOvj4KW2dwtYE3yAWk/wS/PLMKfmuGHZ8MAXF/Ja32Yi5haAKWz4Ydm2cSpgU693Atb7km+Zwwh+WGcPpxw3gAkzCLY+iYUDW/Z3Adc/gpzyFrAqnALkJe+7DoItgAtRS2zuKqGE3yAx0oJvkdvYrfZmALURbDuL5/RLf13cAuDeBS2RpbtAm+QFVA3wR+3fUtFHoBDJnC0jIXH0HWsgMY8inPLuOkd9chp4z20ALQLSA8cI9jYAIa2zjzjBd8gRafS1vgiUho/kAKcsCGTOGWvoOpkAtB3z8Hm8x2Ff5ADp4+lXAlIvcmwH/2Q==') repeat left top; 38 | } 39 | 40 | pre[class*="language-"] { 41 | padding: 12px; 42 | overflow: auto; 43 | } 44 | 45 | :not(pre) > code[class*="language-"] { 46 | padding: 2px 6px; 47 | } 48 | 49 | .token.namespace { 50 | opacity: .7; 51 | } 52 | 53 | .token.comment, 54 | .token.prolog, 55 | .token.doctype, 56 | .token.cdata { 57 | color: #586e75; 58 | font-style: italic; 59 | } 60 | 61 | .token.number, 62 | .token.string, 63 | .token.char, 64 | .token.builtin, 65 | .token.inserted { 66 | color: #468966; 67 | } 68 | 69 | .token.attr-name { 70 | color: #b89859; 71 | } 72 | 73 | .token.operator, 74 | .token.entity, 75 | .token.url, 76 | .language-css .token.string, 77 | .style .token.string { 78 | color: #dccf8f; 79 | } 80 | 81 | .token.selector, 82 | .token.regex { 83 | color: #859900; 84 | } 85 | 86 | .token.atrule, 87 | .token.keyword { 88 | color: #cb4b16; 89 | } 90 | 91 | .token.attr-value { 92 | color: #468966; 93 | } 94 | 95 | .token.function, 96 | .token.variable, 97 | .token.placeholder { 98 | color: #b58900; 99 | } 100 | 101 | .token.property, 102 | .token.tag, 103 | .token.boolean, 104 | .token.number, 105 | .token.constant, 106 | .token.symbol { 107 | color: #b89859; 108 | } 109 | 110 | .token.tag { 111 | color: #ffb03b; 112 | } 113 | 114 | .token.important, 115 | .token.statement, 116 | .token.deleted { 117 | color: #dc322f; 118 | } 119 | 120 | .token.punctuation { 121 | color: #dccf8f; 122 | } 123 | 124 | .token.entity { 125 | cursor: help; 126 | } 127 | 128 | .token.bold { 129 | font-weight: bold; 130 | } 131 | 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | /* 137 | .pojoaque-colors { 138 | color: #586e75; 139 | color: #b64926; 140 | color: #468966; 141 | color: #ffb03b; 142 | color: #b58900; 143 | color: #b89859; 144 | color: #dccf8f; 145 | color: #d3a60c; 146 | color: #cb4b16; 147 | color: #dc322f; 148 | color: #073642; 149 | color: #181914; 150 | } 151 | */ 152 | -------------------------------------------------------------------------------- /dist/code-themes/twilight.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js Twilight theme 3 | * Based (more or less) on the Twilight theme originally of Textmate fame. 4 | * @author Remy Bach 5 | */ 6 | code[class*="language-"], 7 | pre[class*="language-"] { 8 | color: white; 9 | background: none; 10 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 11 | font-size: 1em; 12 | text-align: left; 13 | text-shadow: 0 -.1em .2em black; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | word-wrap: normal; 18 | line-height: 1.5; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | } 29 | 30 | pre[class*="language-"], 31 | :not(pre) > code[class*="language-"] { 32 | background: hsl(0, 0%, 8%); /* #141414 */ 33 | } 34 | 35 | /* Code blocks */ 36 | pre[class*="language-"] { 37 | border-radius: .5em; 38 | border: .3em solid hsl(0, 0%, 33%); /* #282A2B */ 39 | box-shadow: 1px 1px .5em black inset; 40 | margin: .5em 0; 41 | overflow: auto; 42 | padding: 1em; 43 | } 44 | 45 | pre[class*="language-"]::-moz-selection { 46 | /* Firefox */ 47 | background: hsl(200, 4%, 16%); /* #282A2B */ 48 | } 49 | 50 | pre[class*="language-"]::selection { 51 | /* Safari */ 52 | background: hsl(200, 4%, 16%); /* #282A2B */ 53 | } 54 | 55 | /* Text Selection colour */ 56 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 57 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 58 | text-shadow: none; 59 | background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */ 60 | } 61 | 62 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 63 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 64 | text-shadow: none; 65 | background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */ 66 | } 67 | 68 | /* Inline code */ 69 | :not(pre) > code[class*="language-"] { 70 | border-radius: .3em; 71 | border: .13em solid hsl(0, 0%, 33%); /* #545454 */ 72 | box-shadow: 1px 1px .3em -.1em black inset; 73 | padding: .15em .2em .05em; 74 | white-space: normal; 75 | } 76 | 77 | .token.comment, 78 | .token.prolog, 79 | .token.doctype, 80 | .token.cdata { 81 | color: hsl(0, 0%, 47%); /* #777777 */ 82 | } 83 | 84 | .token.punctuation { 85 | opacity: .7; 86 | } 87 | 88 | .token.namespace { 89 | opacity: .7; 90 | } 91 | 92 | .token.tag, 93 | .token.boolean, 94 | .token.number, 95 | .token.deleted { 96 | color: hsl(14, 58%, 55%); /* #CF6A4C */ 97 | } 98 | 99 | .token.keyword, 100 | .token.property, 101 | .token.selector, 102 | .token.constant, 103 | .token.symbol, 104 | .token.builtin { 105 | color: hsl(53, 89%, 79%); /* #F9EE98 */ 106 | } 107 | 108 | .token.attr-name, 109 | .token.attr-value, 110 | .token.string, 111 | .token.char, 112 | .token.operator, 113 | .token.entity, 114 | .token.url, 115 | .language-css .token.string, 116 | .style .token.string, 117 | .token.variable, 118 | .token.inserted { 119 | color: hsl(76, 21%, 52%); /* #8F9D6A */ 120 | } 121 | 122 | .token.atrule { 123 | color: hsl(218, 22%, 55%); /* #7587A6 */ 124 | } 125 | 126 | .token.regex, 127 | .token.important { 128 | color: hsl(42, 75%, 65%); /* #E9C062 */ 129 | } 130 | 131 | .token.important, 132 | .token.bold { 133 | font-weight: bold; 134 | } 135 | .token.italic { 136 | font-style: italic; 137 | } 138 | 139 | .token.entity { 140 | cursor: help; 141 | } 142 | 143 | pre[data-line] { 144 | padding: 1em 0 1em 3em; 145 | position: relative; 146 | } 147 | 148 | /* Markup */ 149 | .language-markup .token.tag, 150 | .language-markup .token.attr-name, 151 | .language-markup .token.punctuation { 152 | color: hsl(33, 33%, 52%); /* #AC885B */ 153 | } 154 | 155 | /* Make the tokens sit above the line highlight so the colours don't look faded. */ 156 | .token { 157 | position: relative; 158 | z-index: 1; 159 | } 160 | 161 | .line-highlight { 162 | background: hsla(0, 0%, 33%, 0.25); /* #545454 */ 163 | background: linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */ 164 | border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */ 165 | border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */ 166 | left: 0; 167 | line-height: inherit; 168 | margin-top: 0.75em; /* Same as .prism’s padding-top */ 169 | padding: inherit 0; 170 | pointer-events: none; 171 | position: absolute; 172 | right: 0; 173 | white-space: pre; 174 | z-index: 0; 175 | } 176 | 177 | .line-highlight:before, 178 | .line-highlight[data-end]:after { 179 | background-color: hsl(215, 15%, 59%); /* #8794A6 */ 180 | border-radius: 999px; 181 | box-shadow: 0 1px white; 182 | color: hsl(24, 20%, 95%); /* #F5F2F0 */ 183 | content: attr(data-start); 184 | font: bold 65%/1.5 sans-serif; 185 | left: .6em; 186 | min-width: 1em; 187 | padding: 0 .5em; 188 | position: absolute; 189 | text-align: center; 190 | text-shadow: none; 191 | top: .4em; 192 | vertical-align: .3em; 193 | } 194 | 195 | .line-highlight[data-end]:after { 196 | bottom: .4em; 197 | content: attr(data-end); 198 | top: auto; 199 | } 200 | -------------------------------------------------------------------------------- /dist/code-themes/coy.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML 3 | * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics); 4 | * @author Tim Shedor 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: black; 10 | background: none; 11 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 12 | font-size: 1em; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | word-wrap: normal; 18 | line-height: 1.5; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | } 29 | 30 | /* Code blocks */ 31 | pre[class*="language-"] { 32 | position: relative; 33 | margin: .5em 0; 34 | overflow: visible; 35 | padding: 0; 36 | } 37 | pre[class*="language-"]>code { 38 | position: relative; 39 | border-left: 10px solid #358ccb; 40 | box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf; 41 | background-color: #fdfdfd; 42 | background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%); 43 | background-size: 3em 3em; 44 | background-origin: content-box; 45 | background-attachment: local; 46 | } 47 | 48 | code[class*="language-"] { 49 | max-height: inherit; 50 | height: inherit; 51 | padding: 0 1em; 52 | display: block; 53 | overflow: auto; 54 | } 55 | 56 | /* Margin bottom to accommodate shadow */ 57 | :not(pre) > code[class*="language-"], 58 | pre[class*="language-"] { 59 | background-color: #fdfdfd; 60 | -webkit-box-sizing: border-box; 61 | -moz-box-sizing: border-box; 62 | box-sizing: border-box; 63 | margin-bottom: 1em; 64 | } 65 | 66 | /* Inline code */ 67 | :not(pre) > code[class*="language-"] { 68 | position: relative; 69 | padding: .2em; 70 | border-radius: 0.3em; 71 | color: #c92c2c; 72 | border: 1px solid rgba(0, 0, 0, 0.1); 73 | display: inline; 74 | white-space: normal; 75 | } 76 | 77 | pre[class*="language-"]:before, 78 | pre[class*="language-"]:after { 79 | content: ''; 80 | z-index: -2; 81 | display: block; 82 | position: absolute; 83 | bottom: 0.75em; 84 | left: 0.18em; 85 | width: 40%; 86 | height: 20%; 87 | max-height: 13em; 88 | box-shadow: 0px 13px 8px #979797; 89 | -webkit-transform: rotate(-2deg); 90 | -moz-transform: rotate(-2deg); 91 | -ms-transform: rotate(-2deg); 92 | -o-transform: rotate(-2deg); 93 | transform: rotate(-2deg); 94 | } 95 | 96 | pre[class*="language-"]:after { 97 | right: 0.75em; 98 | left: auto; 99 | -webkit-transform: rotate(2deg); 100 | -moz-transform: rotate(2deg); 101 | -ms-transform: rotate(2deg); 102 | -o-transform: rotate(2deg); 103 | transform: rotate(2deg); 104 | } 105 | 106 | .token.comment, 107 | .token.block-comment, 108 | .token.prolog, 109 | .token.doctype, 110 | .token.cdata { 111 | color: #7D8B99; 112 | } 113 | 114 | .token.punctuation { 115 | color: #5F6364; 116 | } 117 | 118 | .token.property, 119 | .token.tag, 120 | .token.boolean, 121 | .token.number, 122 | .token.function-name, 123 | .token.constant, 124 | .token.symbol, 125 | .token.deleted { 126 | color: #c92c2c; 127 | } 128 | 129 | .token.selector, 130 | .token.attr-name, 131 | .token.string, 132 | .token.char, 133 | .token.function, 134 | .token.builtin, 135 | .token.inserted { 136 | color: #2f9c0a; 137 | } 138 | 139 | .token.operator, 140 | .token.entity, 141 | .token.url, 142 | .token.variable { 143 | color: #a67f59; 144 | background: rgba(255, 255, 255, 0.5); 145 | } 146 | 147 | .token.atrule, 148 | .token.attr-value, 149 | .token.keyword, 150 | .token.class-name { 151 | color: #1990b8; 152 | } 153 | 154 | .token.regex, 155 | .token.important { 156 | color: #e90; 157 | } 158 | 159 | .language-css .token.string, 160 | .style .token.string { 161 | color: #a67f59; 162 | background: rgba(255, 255, 255, 0.5); 163 | } 164 | 165 | .token.important { 166 | font-weight: normal; 167 | } 168 | 169 | .token.bold { 170 | font-weight: bold; 171 | } 172 | .token.italic { 173 | font-style: italic; 174 | } 175 | 176 | .token.entity { 177 | cursor: help; 178 | } 179 | 180 | .token.namespace { 181 | opacity: .7; 182 | } 183 | 184 | @media screen and (max-width: 767px) { 185 | pre[class*="language-"]:before, 186 | pre[class*="language-"]:after { 187 | bottom: 14px; 188 | box-shadow: none; 189 | } 190 | 191 | } 192 | 193 | /* Plugin styles: Line Numbers */ 194 | pre[class*="language-"].line-numbers.line-numbers { 195 | padding-left: 0; 196 | } 197 | 198 | pre[class*="language-"].line-numbers.line-numbers code { 199 | padding-left: 3.8em; 200 | } 201 | 202 | pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows { 203 | left: 0; 204 | } 205 | 206 | /* Plugin styles: Line Highlight */ 207 | pre[class*="language-"][data-line] { 208 | padding-top: 0; 209 | padding-bottom: 0; 210 | padding-left: 0; 211 | } 212 | pre[data-line] code { 213 | position: relative; 214 | padding-left: 4em; 215 | } 216 | pre .line-highlight { 217 | margin-top: 0; 218 | } 219 | -------------------------------------------------------------------------------- /src/style/utilities.scss: -------------------------------------------------------------------------------- 1 | .vue-tut { 2 | // 3 | // Size 4 | // 5 | 6 | .h-100 { 7 | height: 100%; 8 | } 9 | 10 | .vh-100 { 11 | height: 100vh; 12 | } 13 | 14 | .w-100 { 15 | width: 100%; 16 | } 17 | 18 | .vw-100 { 19 | width: 100vw; 20 | } 21 | 22 | // 23 | // White space 24 | // 25 | 26 | .pre-line { 27 | white-space: pre-line; 28 | } 29 | 30 | .pre-wrap { 31 | white-space: pre-wrap; 32 | } 33 | 34 | .no-wrap { 35 | white-space: nowrap; 36 | } 37 | 38 | // 39 | // Display 40 | // 41 | 42 | .d-block { 43 | display: block; 44 | } 45 | 46 | .d-inline-block { 47 | display: inline-block; 48 | } 49 | 50 | .d-flex { 51 | display: flex; 52 | } 53 | 54 | .d-inline-flex { 55 | display: inline-flex; 56 | } 57 | 58 | .d-grid { 59 | display: grid; 60 | } 61 | 62 | .d-none { 63 | display: none; 64 | } 65 | 66 | .hide { 67 | visibility: hidden; 68 | } 69 | 70 | // 71 | // Overflow 72 | // 73 | 74 | .overflow-hidden { 75 | overflow: hidden; 76 | } 77 | 78 | .overflow-auto { 79 | overflow: auto; 80 | } 81 | 82 | // 83 | // Flex 84 | // 85 | 86 | .flex-center { 87 | justify-content: center; 88 | } 89 | 90 | .flex-middle { 91 | align-items: center; 92 | } 93 | 94 | .flex-grow { 95 | flex-grow: 1; 96 | } 97 | 98 | .flex-shrink { 99 | flex-shrink: 1; 100 | } 101 | 102 | .flex-vertical { 103 | flex-direction: column; 104 | } 105 | 106 | .flex-space { 107 | justify-content: space-between; 108 | } 109 | 110 | .flex-end { 111 | justify-content: flex-end; 112 | } 113 | 114 | .flex-start { 115 | justify-content: flex-start; 116 | } 117 | 118 | // 119 | // Text alignment 120 | // 121 | 122 | .text-center { 123 | text-align: center; 124 | } 125 | 126 | // 127 | // Spacing 128 | // 129 | 130 | .m-z { 131 | margin: 0 !important; 132 | } 133 | 134 | .m-n-z { 135 | margin-top: 0 !important; 136 | } 137 | 138 | .m-e-z { 139 | margin-right: 0 !important; 140 | } 141 | 142 | .m-s-z { 143 | margin-bottom: 0 !important; 144 | } 145 | 146 | .m-w-z { 147 | margin-left: 0 !important; 148 | } 149 | 150 | .m-n-xl { 151 | margin-top: 25px; 152 | } 153 | 154 | .m-e-xl { 155 | margin-right: 25px; 156 | } 157 | 158 | .m-s-xl { 159 | margin-bottom: 25px; 160 | } 161 | 162 | .m-w-xl { 163 | margin-left: 25px; 164 | } 165 | 166 | .m-n-lg { 167 | margin-top: 20px; 168 | } 169 | 170 | .m-e-lg { 171 | margin-right: 20px; 172 | } 173 | 174 | .m-s-lg { 175 | margin-bottom: 20px; 176 | } 177 | 178 | .m-w-lg { 179 | margin-left: 20px; 180 | } 181 | 182 | .m-n-med { 183 | margin-top: 15px; 184 | } 185 | 186 | .m-e-med { 187 | margin-right: 15px; 188 | } 189 | 190 | .m-s-med { 191 | margin-bottom: 15px; 192 | } 193 | 194 | .m-w-med { 195 | margin-left: 15px; 196 | } 197 | 198 | .m-n-sm { 199 | margin-top: 10px; 200 | } 201 | 202 | .m-e-sm { 203 | margin-right: 10px; 204 | } 205 | 206 | .m-s-sm { 207 | margin-bottom: 10px; 208 | } 209 | 210 | .m-w-sm { 211 | margin-left: 10px; 212 | } 213 | 214 | .m-n-xs { 215 | margin-top: 5px; 216 | } 217 | 218 | .m-e-xs { 219 | margin-right: 5px; 220 | } 221 | 222 | .m-s-xs { 223 | margin-bottom: 5px; 224 | } 225 | 226 | .m-w-xs { 227 | margin-left: 5px; 228 | } 229 | 230 | .m-n-xxs { 231 | margin-top: 2px; 232 | } 233 | 234 | .m-e-xxs { 235 | margin-right: 2px; 236 | } 237 | 238 | .m-s-xxs { 239 | margin-bottom: 2px; 240 | } 241 | 242 | .m-w-xxs { 243 | margin-left: 2px; 244 | } 245 | 246 | .p-z { 247 | padding: 0 !important; 248 | } 249 | 250 | .p-n-z { 251 | padding-top: 0 !important; 252 | } 253 | 254 | .p-e-z { 255 | padding-right: 0 !important; 256 | } 257 | 258 | .p-s-z { 259 | padding-bottom: 0 !important; 260 | } 261 | 262 | .p-w-z { 263 | padding-left: 0 !important; 264 | } 265 | 266 | .p-n-xl { 267 | padding-top: 25px; 268 | } 269 | 270 | .p-e-xl { 271 | padding-right: 25px; 272 | } 273 | 274 | .p-s-xl { 275 | padding-bottom: 25px; 276 | } 277 | 278 | .p-w-xl { 279 | padding-left: 25px; 280 | } 281 | 282 | .p-n-lg { 283 | padding-top: 20px; 284 | } 285 | 286 | .p-e-lg { 287 | padding-right: 20px; 288 | } 289 | 290 | .p-s-lg { 291 | padding-bottom: 20px; 292 | } 293 | 294 | .p-w-lg { 295 | padding-left: 20px; 296 | } 297 | 298 | .p-n-med { 299 | padding-top: 15px; 300 | } 301 | 302 | .p-e-med { 303 | padding-right: 15px; 304 | } 305 | 306 | .p-s-med { 307 | padding-bottom: 15px; 308 | } 309 | 310 | .p-w-med { 311 | padding-left: 15px; 312 | } 313 | 314 | .p-n-sm { 315 | padding-top: 10px; 316 | } 317 | 318 | .p-e-sm { 319 | padding-right: 10px; 320 | } 321 | 322 | .p-s-sm { 323 | padding-bottom: 10px; 324 | } 325 | 326 | .p-w-sm { 327 | padding-left: 10px; 328 | } 329 | 330 | .p-n-xs { 331 | padding-top: 5px; 332 | } 333 | 334 | .p-e-xs { 335 | padding-right: 5px; 336 | } 337 | 338 | .p-s-xs { 339 | padding-bottom: 5px; 340 | } 341 | 342 | .p-w-xs { 343 | padding-left: 5px; 344 | } 345 | 346 | .p-xs { 347 | padding: 5px; 348 | } 349 | 350 | .p-n-xxs { 351 | padding-top: 2px; 352 | } 353 | 354 | .p-e-xxs { 355 | padding-right: 2px; 356 | } 357 | 358 | .p-s-xxs { 359 | padding-bottom: 2px; 360 | } 361 | 362 | .p-w-xxs { 363 | padding-left: 2px; 364 | } 365 | 366 | .p-xxs { 367 | padding: 2px; 368 | } 369 | 370 | .p-xs { 371 | padding: 5px; 372 | } 373 | 374 | .p-sm { 375 | padding: 10px; 376 | } 377 | 378 | .p-med { 379 | padding: 15px; 380 | } 381 | 382 | .p-lg { 383 | padding: 20px; 384 | } 385 | 386 | .p-xl { 387 | padding: 25px; 388 | } 389 | 390 | .m-xxs { 391 | margin: 2px; 392 | } 393 | 394 | .m-xs { 395 | margin: 5px; 396 | } 397 | 398 | .m-sm { 399 | margin: 10px; 400 | } 401 | 402 | .m-med { 403 | margin: 15px; 404 | } 405 | 406 | .m-lg { 407 | margin: 20px; 408 | } 409 | 410 | .m-xl { 411 | margin: 25px; 412 | } 413 | 414 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VueTut 2 | 3 | Easily build beautiful tutorials with Vue. 4 | 5 | **📒 ⠀[Docs](https://evwt.github.io/vue-tut/)** 6 |
7 | **🖥 ⠀[Tutorial/Demo](https://vn192.csb.app/)** 8 |
9 | 10 | [![Join the chat at https://gitter.im/vue-tut/community](https://badges.gitter.im/vue-tut/community.svg)](https://gitter.im/vue-tut/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 11 | 12 | ## Install 13 | 14 | ```bash 15 | npm i vue-tut 16 | ``` 17 | 18 | ## Setup 19 | 20 | ```js 21 | import VueTut from 'vue-tut'; 22 | import 'vue-tut/dist/vue-tut.min.css'; 23 | 24 | // Select a tutorial theme 25 | import 'vue-tut/dist/themes/vue.css'; 26 | 27 | // Select a code highlighting theme 28 | import 'vue-tut/dist/code-themes/vue.css'; 29 | 30 | Vue.use(VueTut); 31 | ``` 32 | 33 | ### Themes 34 | 35 | #### Tutorial 36 | 37 | `vue` or `azure` 38 | 39 | #### Highlighting 40 | 41 | prism-themes themes 42 |
43 | `a11y-dark` / `atom-dark` / `base16-ateliersulphurpool.light` / `cb` / `darcula` / `dracula` / `duotone-dark` / `duotone-earth` / `duotone-forest` / `duotone-light` / `duotone-sea` / `duotone-space` / `ghcolors` / `hopscotch` / `material-dark` / `material-light` / `material-oceanic` / `nord` / `pojoaque` / `shades-of-purple` / `synthwave84` / `vs` / `vsc-dark-plus` / `xonokai` 44 |

45 | Official themes 46 |
47 | `coy` / `dark` / `funky` / `okaidia` / `prism` / `solarizedlight` / `tomorrow` / `twilight` 48 |

49 | vue-tut themes 50 |
51 | `vue` 52 | 53 | ### Languages 54 | 55 | `abap` / `abnf` / `actionscript` / `ada` / `agda` / `al` / `antlr4` / `apacheconf` / `apl` / `applescript` / `aql` / `arduino` / `arff` / `asciidoc` / `asm6502` / `aspnet` / `autohotkey` / `autoit` / `bash` / `basic` / `batch` / `bbcode` / `bison` / `bnf` / `brainfuck` / `brightscript` / `bro` / `bsl` / `c` / `cil` / `clike` / `clojure` / `cmake` / `coffeescript` / `concurnas` / `core` / `cpp` / `crystal` / `csharp` / `csp` / `css-extras` / `css` / `cypher` / `d` / `dart` / `dax` / `dhall` / `diff` / `django` / `dns-zone-file` / `docker` / `ebnf` / `editorconfig` / `eiffel` / `ejs` / `elixir` / `elm` / `erb` / `erlang` / `etlua` / `excel-formula` / `factor` / `firestore-security-rules` / `flow` / `fortran` / `fsharp` / `ftl` / `gcode` / `gdscript` / `gedcom` / `gherkin` / `git` / `glsl` / `gml` / `go` / `graphql` / `groovy` / `haml` / `handlebars` / `haskell` / `haxe` / `hcl` / `hlsl` / `hpkp` / `hsts` / `http` / `ichigojam` / `icon` / `iecst` / `ignore` / `inform7` / `ini` / `io` / `j` / `java` / `javadoc` / `javadoclike` / `javascript` / `javastacktrace` / `jolie` / `jq` / `js-extras` / `js-templates` / `jsdoc` / `json` / `json5` / `jsonp` / `jsstacktrace` / `jsx` / `julia` / `keyman` / `kotlin` / `latex` / `latte` / `less` / `lilypond` / `liquid` / `lisp` / `livescript` / `llvm` / `lolcode` / `lua` / `makefile` / `markdown` / `markup-templating` / `markup` / `matlab` / `mel` / `mizar` / `mongodb` / `monkey` / `moonscript` / `n1ql` / `n4js` / `nand2tetris-hdl` / `naniscript` / `nasm` / `neon` / `nginx` / `nim` / `nix` / `nsis` / `objectivec` / `ocaml` / `opencl` / `oz` / `parigp` / `parser` / `pascal` / `pascaligo` / `pcaxis` / `peoplecode` / `perl` / `php-extras` / `php` / `phpdoc` / `plsql` / `powerquery` / `powershell` / `processing` / `prolog` / `properties` / `protobuf` / `pug` / `puppet` / `pure` / `purebasic` / `python` / `q` / `qml` / `qore` / `r` / `racket` / `reason` / `regex` / `renpy` / `rest` / `rip` / `roboconf` / `robotframework` / `ruby` / `rust` / `sas` / `sass` / `scala` / `scheme` / `scss` / `shell-session` / `smali` / `smalltalk` / `smarty` / `solidity` / `solution-file` / `soy` / `sparql` / `splunk-spl` / `sqf` / `sql` / `stan` / `stylus` / `swift` / `t4-cs` / `t4-templating` / `t4-vb` / `tap` / `tcl` / `textile` / `toml` / `tsx` / `tt2` / `turtle` / `twig` / `typescript` / `typoscript` / `unrealscript` / `vala` / `vbnet` / `velocity` / `verilog` / `vhdl` / `vim` / `visual-basic` / `vue` / `warpscript` / `wasm` / `wiki` / `xeora` / `xml-doc` / `xojo` / `xquery` / `yaml` / `yang` / `zig` 56 | 57 | ## Usage 58 | 59 | ```vue 60 | 80 | 81 | 111 | ``` 112 | 113 | Result 114 | 115 | ## Examples 116 | 117 | ### Hello World 118 | Theme: `vue`, Code Theme: `tomorrow` 119 | 120 | Screen Shot 2020-08-20 at 6 00 39 PM 121 | 122 | 123 | [![Edit zealous-grass-czz5i](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/zealous-grass-czz5i?fontsize=14&hidenavigation=1&theme=light) 124 | 125 |
126 | 127 | ### C# Tutorial 128 | Theme: `azure`, Code Theme: `vs` 129 | 130 | Screen Shot 2020-08-20 at 6 59 28 PM 131 | 132 | 133 | Shows using a different language besides vue. 134 | 135 | [![Edit zealous-grass-czz5i](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/spring-cdn-z3e3c?fontsize=14&hidenavigation=1&theme=light) 136 | 137 | 138 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # VueTut 2 | 3 | Easily build beautiful tutorials with Vue. 4 | 5 | **📒 ⠀[Docs](https://evwt.github.io/vue-tut/)** 6 |
7 | **🖥 ⠀[Tutorial/Demo](https://vn192.csb.app/)** 8 |
9 | 10 | [![Join the chat at https://gitter.im/vue-tut/community](https://badges.gitter.im/vue-tut/community.svg)](https://gitter.im/vue-tut/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 11 | 12 | ## Install 13 | 14 | ```bash 15 | npm i vue-tut 16 | ``` 17 | 18 | ## Setup 19 | 20 | ```js 21 | import VueTut from 'vue-tut'; 22 | import 'vue-tut/dist/vue-tut.min.css'; 23 | 24 | // Select a tutorial theme 25 | import 'vue-tut/dist/themes/vue.css'; 26 | 27 | // Select a code highlighting theme 28 | import 'vue-tut/dist/code-themes/vue.css'; 29 | 30 | Vue.use(VueTut); 31 | ``` 32 | 33 | ### Themes 34 | 35 | #### Tutorial 36 | 37 | `vue` or `azure` 38 | 39 | #### Highlighting 40 | 41 | prism-themes themes 42 |
43 | `a11y-dark` / `atom-dark` / `base16-ateliersulphurpool.light` / `cb` / `darcula` / `dracula` / `duotone-dark` / `duotone-earth` / `duotone-forest` / `duotone-light` / `duotone-sea` / `duotone-space` / `ghcolors` / `hopscotch` / `material-dark` / `material-light` / `material-oceanic` / `nord` / `pojoaque` / `shades-of-purple` / `synthwave84` / `vs` / `vsc-dark-plus` / `xonokai` 44 |

45 | Official themes 46 |
47 | `coy` / `dark` / `funky` / `okaidia` / `prism` / `solarizedlight` / `tomorrow` / `twilight` 48 |

49 | vue-tut themes 50 |
51 | `vue` 52 | 53 | ### Languages 54 | 55 | `abap` / `abnf` / `actionscript` / `ada` / `agda` / `al` / `antlr4` / `apacheconf` / `apl` / `applescript` / `aql` / `arduino` / `arff` / `asciidoc` / `asm6502` / `aspnet` / `autohotkey` / `autoit` / `bash` / `basic` / `batch` / `bbcode` / `bison` / `bnf` / `brainfuck` / `brightscript` / `bro` / `bsl` / `c` / `cil` / `clike` / `clojure` / `cmake` / `coffeescript` / `concurnas` / `core` / `cpp` / `crystal` / `csharp` / `csp` / `css-extras` / `css` / `cypher` / `d` / `dart` / `dax` / `dhall` / `diff` / `django` / `dns-zone-file` / `docker` / `ebnf` / `editorconfig` / `eiffel` / `ejs` / `elixir` / `elm` / `erb` / `erlang` / `etlua` / `excel-formula` / `factor` / `firestore-security-rules` / `flow` / `fortran` / `fsharp` / `ftl` / `gcode` / `gdscript` / `gedcom` / `gherkin` / `git` / `glsl` / `gml` / `go` / `graphql` / `groovy` / `haml` / `handlebars` / `haskell` / `haxe` / `hcl` / `hlsl` / `hpkp` / `hsts` / `http` / `ichigojam` / `icon` / `iecst` / `ignore` / `inform7` / `ini` / `io` / `j` / `java` / `javadoc` / `javadoclike` / `javascript` / `javastacktrace` / `jolie` / `jq` / `js-extras` / `js-templates` / `jsdoc` / `json` / `json5` / `jsonp` / `jsstacktrace` / `jsx` / `julia` / `keyman` / `kotlin` / `latex` / `latte` / `less` / `lilypond` / `liquid` / `lisp` / `livescript` / `llvm` / `lolcode` / `lua` / `makefile` / `markdown` / `markup-templating` / `markup` / `matlab` / `mel` / `mizar` / `mongodb` / `monkey` / `moonscript` / `n1ql` / `n4js` / `nand2tetris-hdl` / `naniscript` / `nasm` / `neon` / `nginx` / `nim` / `nix` / `nsis` / `objectivec` / `ocaml` / `opencl` / `oz` / `parigp` / `parser` / `pascal` / `pascaligo` / `pcaxis` / `peoplecode` / `perl` / `php-extras` / `php` / `phpdoc` / `plsql` / `powerquery` / `powershell` / `processing` / `prolog` / `properties` / `protobuf` / `pug` / `puppet` / `pure` / `purebasic` / `python` / `q` / `qml` / `qore` / `r` / `racket` / `reason` / `regex` / `renpy` / `rest` / `rip` / `roboconf` / `robotframework` / `ruby` / `rust` / `sas` / `sass` / `scala` / `scheme` / `scss` / `shell-session` / `smali` / `smalltalk` / `smarty` / `solidity` / `solution-file` / `soy` / `sparql` / `splunk-spl` / `sqf` / `sql` / `stan` / `stylus` / `swift` / `t4-cs` / `t4-templating` / `t4-vb` / `tap` / `tcl` / `textile` / `toml` / `tsx` / `tt2` / `turtle` / `twig` / `typescript` / `typoscript` / `unrealscript` / `vala` / `vbnet` / `velocity` / `verilog` / `vhdl` / `vim` / `visual-basic` / `vue` / `warpscript` / `wasm` / `wiki` / `xeora` / `xml-doc` / `xojo` / `xquery` / `yaml` / `yang` / `zig` 56 | 57 | ## Usage 58 | 59 | ```vue 60 | 80 | 81 | 111 | ``` 112 | 113 | Result 114 | 115 | ## Examples 116 | 117 | ### Hello World 118 | Theme: `vue`, Code Theme: `tomorrow` 119 | 120 | Screen Shot 2020-08-20 at 6 00 39 PM 121 | 122 | 123 | [![Edit zealous-grass-czz5i](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/zealous-grass-czz5i?fontsize=14&hidenavigation=1&theme=light) 124 | 125 |
126 | 127 | ### C# Tutorial 128 | Theme: `azure`, Code Theme: `vs` 129 | 130 | Screen Shot 2020-08-20 at 6 59 28 PM 131 | 132 | 133 | Shows using a different language besides vue. 134 | 135 | [![Edit zealous-grass-czz5i](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/spring-cdn-z3e3c?fontsize=14&hidenavigation=1&theme=light) 136 | 137 | 138 | -------------------------------------------------------------------------------- /src/packages/TutorialHighlighter/TutorialHighlighter.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 147 | -------------------------------------------------------------------------------- /dist/vue-tut.esm.css: -------------------------------------------------------------------------------- 1 | .vue-tut .h-100 { 2 | height: 100%; } 3 | 4 | .vue-tut .vh-100 { 5 | height: 100vh; } 6 | 7 | .vue-tut .w-100 { 8 | width: 100%; } 9 | 10 | .vue-tut .vw-100 { 11 | width: 100vw; } 12 | 13 | .vue-tut .pre-line { 14 | white-space: pre-line; } 15 | 16 | .vue-tut .pre-wrap { 17 | white-space: pre-wrap; } 18 | 19 | .vue-tut .no-wrap { 20 | white-space: nowrap; } 21 | 22 | .vue-tut .d-block { 23 | display: block; } 24 | 25 | .vue-tut .d-inline-block { 26 | display: inline-block; } 27 | 28 | .vue-tut .d-flex { 29 | display: flex; } 30 | 31 | .vue-tut .d-inline-flex { 32 | display: inline-flex; } 33 | 34 | .vue-tut .d-grid { 35 | display: grid; } 36 | 37 | .vue-tut .d-none { 38 | display: none; } 39 | 40 | .vue-tut .hide { 41 | visibility: hidden; } 42 | 43 | .vue-tut .overflow-hidden { 44 | overflow: hidden; } 45 | 46 | .vue-tut .overflow-auto { 47 | overflow: auto; } 48 | 49 | .vue-tut .flex-center { 50 | justify-content: center; } 51 | 52 | .vue-tut .flex-middle { 53 | align-items: center; } 54 | 55 | .vue-tut .flex-grow { 56 | flex-grow: 1; } 57 | 58 | .vue-tut .flex-shrink { 59 | flex-shrink: 1; } 60 | 61 | .vue-tut .flex-vertical { 62 | flex-direction: column; } 63 | 64 | .vue-tut .flex-space { 65 | justify-content: space-between; } 66 | 67 | .vue-tut .flex-end { 68 | justify-content: flex-end; } 69 | 70 | .vue-tut .flex-start { 71 | justify-content: flex-start; } 72 | 73 | .vue-tut .text-center { 74 | text-align: center; } 75 | 76 | .vue-tut .m-z { 77 | margin: 0 !important; } 78 | 79 | .vue-tut .m-n-z { 80 | margin-top: 0 !important; } 81 | 82 | .vue-tut .m-e-z { 83 | margin-right: 0 !important; } 84 | 85 | .vue-tut .m-s-z { 86 | margin-bottom: 0 !important; } 87 | 88 | .vue-tut .m-w-z { 89 | margin-left: 0 !important; } 90 | 91 | .vue-tut .m-n-xl { 92 | margin-top: 25px; } 93 | 94 | .vue-tut .m-e-xl { 95 | margin-right: 25px; } 96 | 97 | .vue-tut .m-s-xl { 98 | margin-bottom: 25px; } 99 | 100 | .vue-tut .m-w-xl { 101 | margin-left: 25px; } 102 | 103 | .vue-tut .m-n-lg { 104 | margin-top: 20px; } 105 | 106 | .vue-tut .m-e-lg { 107 | margin-right: 20px; } 108 | 109 | .vue-tut .m-s-lg { 110 | margin-bottom: 20px; } 111 | 112 | .vue-tut .m-w-lg { 113 | margin-left: 20px; } 114 | 115 | .vue-tut .m-n-med { 116 | margin-top: 15px; } 117 | 118 | .vue-tut .m-e-med { 119 | margin-right: 15px; } 120 | 121 | .vue-tut .m-s-med { 122 | margin-bottom: 15px; } 123 | 124 | .vue-tut .m-w-med { 125 | margin-left: 15px; } 126 | 127 | .vue-tut .m-n-sm { 128 | margin-top: 10px; } 129 | 130 | .vue-tut .m-e-sm { 131 | margin-right: 10px; } 132 | 133 | .vue-tut .m-s-sm { 134 | margin-bottom: 10px; } 135 | 136 | .vue-tut .m-w-sm { 137 | margin-left: 10px; } 138 | 139 | .vue-tut .m-n-xs { 140 | margin-top: 5px; } 141 | 142 | .vue-tut .m-e-xs { 143 | margin-right: 5px; } 144 | 145 | .vue-tut .m-s-xs { 146 | margin-bottom: 5px; } 147 | 148 | .vue-tut .m-w-xs { 149 | margin-left: 5px; } 150 | 151 | .vue-tut .m-n-xxs { 152 | margin-top: 2px; } 153 | 154 | .vue-tut .m-e-xxs { 155 | margin-right: 2px; } 156 | 157 | .vue-tut .m-s-xxs { 158 | margin-bottom: 2px; } 159 | 160 | .vue-tut .m-w-xxs { 161 | margin-left: 2px; } 162 | 163 | .vue-tut .p-z { 164 | padding: 0 !important; } 165 | 166 | .vue-tut .p-n-z { 167 | padding-top: 0 !important; } 168 | 169 | .vue-tut .p-e-z { 170 | padding-right: 0 !important; } 171 | 172 | .vue-tut .p-s-z { 173 | padding-bottom: 0 !important; } 174 | 175 | .vue-tut .p-w-z { 176 | padding-left: 0 !important; } 177 | 178 | .vue-tut .p-n-xl { 179 | padding-top: 25px; } 180 | 181 | .vue-tut .p-e-xl { 182 | padding-right: 25px; } 183 | 184 | .vue-tut .p-s-xl { 185 | padding-bottom: 25px; } 186 | 187 | .vue-tut .p-w-xl { 188 | padding-left: 25px; } 189 | 190 | .vue-tut .p-n-lg { 191 | padding-top: 20px; } 192 | 193 | .vue-tut .p-e-lg { 194 | padding-right: 20px; } 195 | 196 | .vue-tut .p-s-lg { 197 | padding-bottom: 20px; } 198 | 199 | .vue-tut .p-w-lg { 200 | padding-left: 20px; } 201 | 202 | .vue-tut .p-n-med { 203 | padding-top: 15px; } 204 | 205 | .vue-tut .p-e-med { 206 | padding-right: 15px; } 207 | 208 | .vue-tut .p-s-med { 209 | padding-bottom: 15px; } 210 | 211 | .vue-tut .p-w-med { 212 | padding-left: 15px; } 213 | 214 | .vue-tut .p-n-sm { 215 | padding-top: 10px; } 216 | 217 | .vue-tut .p-e-sm { 218 | padding-right: 10px; } 219 | 220 | .vue-tut .p-s-sm { 221 | padding-bottom: 10px; } 222 | 223 | .vue-tut .p-w-sm { 224 | padding-left: 10px; } 225 | 226 | .vue-tut .p-n-xs { 227 | padding-top: 5px; } 228 | 229 | .vue-tut .p-e-xs { 230 | padding-right: 5px; } 231 | 232 | .vue-tut .p-s-xs { 233 | padding-bottom: 5px; } 234 | 235 | .vue-tut .p-w-xs { 236 | padding-left: 5px; } 237 | 238 | .vue-tut .p-xs { 239 | padding: 5px; } 240 | 241 | .vue-tut .p-n-xxs { 242 | padding-top: 2px; } 243 | 244 | .vue-tut .p-e-xxs { 245 | padding-right: 2px; } 246 | 247 | .vue-tut .p-s-xxs { 248 | padding-bottom: 2px; } 249 | 250 | .vue-tut .p-w-xxs { 251 | padding-left: 2px; } 252 | 253 | .vue-tut .p-xxs { 254 | padding: 2px; } 255 | 256 | .vue-tut .p-xs { 257 | padding: 5px; } 258 | 259 | .vue-tut .p-sm { 260 | padding: 10px; } 261 | 262 | .vue-tut .p-med { 263 | padding: 15px; } 264 | 265 | .vue-tut .p-lg { 266 | padding: 20px; } 267 | 268 | .vue-tut .p-xl { 269 | padding: 25px; } 270 | 271 | .vue-tut .m-xxs { 272 | margin: 2px; } 273 | 274 | .vue-tut .m-xs { 275 | margin: 5px; } 276 | 277 | .vue-tut .m-sm { 278 | margin: 10px; } 279 | 280 | .vue-tut .m-med { 281 | margin: 15px; } 282 | 283 | .vue-tut .m-lg { 284 | margin: 20px; } 285 | 286 | .vue-tut .m-xl { 287 | margin: 25px; } 288 | 289 | .vue-tut { 290 | font-family: sans-serif; 291 | min-height: 100%; } 292 | .vue-tut h1, .vue-tut h2, .vue-tut h3, .vue-tut h4, .vue-tut h5, .vue-tut h6, .vue-tut p { 293 | margin: 0; 294 | padding: 0; 295 | line-height: 1.15; } 296 | .vue-tut hr { 297 | height: 0; 298 | border: 0; 299 | border-bottom: 1px solid #e8e8e8; } 300 | .vue-tut * { 301 | box-sizing: border-box; } 302 | .vue-tut *:before, 303 | .vue-tut *:after { 304 | box-sizing: border-box; } 305 | 306 | .prism-editor-wrapper { 307 | width: 100%; 308 | height: 100%; 309 | display: flex; 310 | align-items: flex-start; 311 | overflow: auto; 312 | tab-size: 1.5em; 313 | -moz-tab-size: 1.5em; } 314 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 315 | .prism-editor-wrapper .prism-editor__textarea { 316 | color: transparent !important; } 317 | .prism-editor-wrapper .prism-editor__textarea::selection { 318 | background-color: #accef7 !important; 319 | color: transparent !important; } } 320 | .prism-editor-wrapper .prism-editor__container { 321 | position: relative; 322 | text-align: left; 323 | box-sizing: border-box; 324 | padding: 0; 325 | overflow: hidden; 326 | width: 100%; } 327 | .prism-editor-wrapper .prism-editor__line-numbers { 328 | height: 100%; 329 | overflow: hidden; 330 | flex-shrink: 0; 331 | padding-top: 4px; 332 | margin-top: 0; 333 | margin-right: 10px; } 334 | .prism-editor-wrapper .prism-editor__line-number { 335 | /* padding: 0 3px 0 5px; */ 336 | text-align: right; 337 | white-space: nowrap; } 338 | .prism-editor-wrapper .prism-editor__textarea { 339 | position: absolute; 340 | top: 0; 341 | left: 0; 342 | height: 100%; 343 | width: 100%; 344 | resize: none; 345 | color: inherit; 346 | overflow: hidden; 347 | -moz-osx-font-smoothing: grayscale; 348 | -webkit-font-smoothing: antialiased; 349 | -webkit-text-fill-color: transparent; } 350 | .prism-editor-wrapper .prism-editor__textarea, 351 | .prism-editor-wrapper .prism-editor__editor { 352 | margin: 0; 353 | border: 0; 354 | box-sizing: inherit; 355 | display: inherit; 356 | font-family: inherit; 357 | font-size: inherit; 358 | font-style: inherit; 359 | font-variant-ligatures: inherit; 360 | font-weight: inherit; 361 | letter-spacing: inherit; 362 | line-height: inherit; 363 | tab-size: inherit; 364 | text-indent: inherit; 365 | text-rendering: inherit; 366 | text-transform: inherit; 367 | white-space: pre; 368 | word-wrap: keep-all; 369 | overflow-wrap: break-word; 370 | padding: 0; } 371 | .prism-editor-wrapper .prism-editor__textarea--empty { 372 | -webkit-text-fill-color: inherit !important; } 373 | .prism-editor-wrapper .prism-editor__editor { 374 | position: relative; 375 | pointer-events: auto; 376 | overflow-x: auto; } 377 | 378 | .vue-tut .tutorial-section { 379 | margin: 50px; } 380 | .vue-tut .tutorial-section header p { 381 | font-size: 16px; 382 | line-height: 1.4; } 383 | .vue-tut .tutorial-section header h1 { 384 | font-size: 20px; } 385 | .vue-tut .tutorial-section header h2 { 386 | font-size: 26px; } 387 | .vue-tut .tutorial-section:last-child { 388 | margin-bottom: 0; } 389 | 390 | .vue-tut { 391 | background-color: #fff; 392 | color: #333; 393 | font-family: "Helvetica Neue", Arial, sans-serif; 394 | -webkit-font-smoothing: antialiased; 395 | text-align: left; } 396 | .vue-tut .tutorial-header, .vue-tut .tutorial-footer { 397 | padding: 50px; } 398 | .vue-tut .tutorial-header h1, .vue-tut .tutorial-footer h1 { 399 | font-size: 22px; 400 | margin-bottom: 10px; } 401 | .vue-tut .tutorial-header h2, .vue-tut .tutorial-footer h2 { 402 | font-size: 32px; 403 | margin-bottom: 25px; } 404 | .vue-tut .tutorial-header p, .vue-tut .tutorial-footer p { 405 | line-height: 1.4; } 406 | .vue-tut .tutorial-footer { 407 | min-height: 100vh; } 408 | .vue-tut .tutorial-footer:empty { 409 | display: none; } 410 | .vue-tut .step-contents .step-aside { 411 | display: none; } 412 | .vue-tut .step-assets .step-after { 413 | display: none; } 414 | 415 | .vue-tut .steps { 416 | padding-top: 50px; } 417 | 418 | .vue-tut .step-wrapper { 419 | padding-bottom: 140px; } 420 | 421 | .vue-tut .step-assets .step-wrapper { 422 | padding-bottom: 0; } 423 | 424 | .vue-tut .step { 425 | border-left: 10px solid transparent; 426 | background-color: #f3f1f1; } 427 | 428 | .vue-tut .step-after { 429 | padding: 0 15px; } 430 | 431 | .vue-tut .step-intersected .step { 432 | border-left: 10px solid gray; } 433 | 434 | .vue-tut .step-intersected ~ .step-intersected .step { 435 | border-left: 10px solid transparent; } 436 | 437 | .vue-tut .step-contents { 438 | width: 39%; 439 | margin-right: 4%; 440 | margin-top: 140px; 441 | margin-bottom: 94vh; } 442 | 443 | .vue-tut .step-aside img { 444 | object-fit: contain; 445 | max-width: 100%; 446 | max-height: 100%; } 447 | 448 | .vue-tut .step-label { 449 | display: block; 450 | font-weight: 600; 451 | letter-spacing: 0.1px; } 452 | 453 | .vue-tut .step hr { 454 | border-color: #ddd; 455 | margin: 16px 0 15px 0; } 456 | 457 | .vue-tut .step p { 458 | line-height: 1.3; } 459 | 460 | .vue-tut .step-assets { 461 | margin-right: -50px; 462 | top: 0; 463 | max-width: 920px; 464 | width: calc(50vw + 8.33333%) !important; 465 | height: calc(100vh); 466 | max-height: 100%; 467 | overflow-y: auto; 468 | position: sticky; } 469 | 470 | .vue-tut .step-assets .step { 471 | display: none; } 472 | 473 | .vue-tut .step-assets .step-wrapper { 474 | height: 100%; } 475 | .vue-tut .step-assets .step-wrapper .step-container { 476 | height: 100%; } 477 | .vue-tut .step-assets .step-wrapper .step-container .step-aside { 478 | height: 100%; } 479 | .vue-tut .step-assets .step-wrapper .step-container .step-aside aside { 480 | height: 100%; 481 | display: flex; 482 | justify-content: center; 483 | align-items: center; } 484 | 485 | .vue-tut .step-after { 486 | margin-top: 40px; } 487 | 488 | .vue-tut .step-after:empty { 489 | display: none; } 490 | 491 | .vue-tut .step-assets-inner { 492 | position: relative; 493 | height: 100%; } 494 | 495 | .vue-tut .step-assets-inner .asset-aside-wrapper { 496 | position: absolute; 497 | top: 0; 498 | left: 0; 499 | right: 0; 500 | bottom: 0; } 501 | 502 | .vue-tut .fade-enter-active { 503 | transition: opacity .75s; } 504 | 505 | .vue-tut .fade-leave-active { 506 | transition: opacity .75s; } 507 | 508 | .vue-tut .fade-enter, .vue-tut .fade-leave-to { 509 | opacity: 0; } 510 | 511 | .vue-tut .tutorial-highlighter { 512 | font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; 513 | font-size: 14px; 514 | line-height: 1.5; 515 | padding: 10px 5px 5px 0; 516 | cursor: text; } 517 | 518 | .vue-tut .tutorial-highlighter-title { 519 | padding: 13px 15px 0px 62px; 520 | font-size: 18px; 521 | font-weight: bold; 522 | height: 36px; } 523 | 524 | .vue-tut .prism-editor-wrapper .prism-editor__container { 525 | overflow-x: auto; } 526 | 527 | .vue-tut .prism-editor__textarea:focus { 528 | outline: none; } 529 | 530 | .vue-tut .prism-editor__editor { 531 | white-space: pre; 532 | word-wrap: inherit; } 533 | 534 | .vue-tut .prism-editor-wrapper { 535 | height: calc(100% - 36px); 536 | font-size: 14px !important; } 537 | .vue-tut .prism-editor-wrapper * { 538 | font-size: 14px !important; } 539 | 540 | .vue-tut .prism-editor__line-numbers { 541 | user-select: none; 542 | cursor: default; 543 | margin-right: 20px; 544 | min-width: 42px; 545 | background: transparent !important; 546 | overflow: visible; } 547 | 548 | .vue-tut .prism-editor__line-number { 549 | border-left: 5px solid transparent; 550 | padding-left: 10px; 551 | position: relative; } 552 | 553 | .vue-tut .prism-editor__line-number.highlight-line { 554 | border-left: 5px solid gray; 555 | background: rgba(128, 128, 128, 0.384); } 556 | 557 | .vue-tut .prism-editor__line-number.highlight-line:after { 558 | content: ""; 559 | height: 21px; 560 | background: rgba(128, 128, 128, 0.384); 561 | pointer-events: none; 562 | position: absolute; 563 | z-index: 1; 564 | max-width: 920px; 565 | width: calc(50vw + 58px) !important; } 566 | 567 | .vue-tut textarea { 568 | display: none !important; } 569 | 570 | .vue-tut pre > span { 571 | position: relative; 572 | z-index: 1; } 573 | 574 | .vue-tut .no-line-numbers .prism-editor__line-numbers { 575 | width: 15px; 576 | min-width: 0; 577 | padding: 0; 578 | margin: 0; } 579 | .vue-tut .no-line-numbers .prism-editor__line-numbers .prism-editor__line-number { 580 | width: 15px; 581 | padding-left: 0 !important; 582 | color: transparent !important; } 583 | 584 | .vue-tut .no-line-numbers .prism-editor__line-number.highlight-line:after { 585 | width: calc(50vw + 64px) !important; } 586 | 587 | .vue-tut .no-line-numbers .tutorial-highlighter-title { 588 | padding-left: 17px; } 589 | 590 | @media only screen and (max-device-width: 600px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { 591 | main.vue-tut .prism-editor-wrapper .prism-editor__line-numbers .prism-editor__line-number { 592 | font-size: 16px !important; 593 | line-height: 27px !important; } 594 | main.vue-tut .prism-editor-wrapper .prism-editor__line-numbers .prism-editor__line-number:after { 595 | height: 27px !important; } 596 | main.vue-tut .prism-editor-wrapper .prism-editor__editor { 597 | font-size: 18px !important; 598 | line-height: 27px !important; } 599 | main.vue-tut .prism-editor-wrapper .token { 600 | font-size: 10px !important; 601 | line-height: 6px !important; } } 602 | 603 | @media only screen and (max-device-width: 600px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { 604 | main.vue-tut .prism-editor-wrapper .prism-editor__line-numbers .prism-editor__line-number { 605 | line-height: 21px !important; 606 | height: 21px !important; } } 607 | 608 | @media all and (max-width: 980px) { 609 | main.vue-tut .tutorial-header { 610 | padding: 15px; 611 | margin-bottom: 5px; } 612 | main.vue-tut .tutorial-header > h1.m-s-sm { 613 | margin-bottom: 5px; } 614 | main.vue-tut .tutorial-header > h2.m-s-xl { 615 | margin-bottom: 15px; } 616 | main.vue-tut .sections .tutorial-section { 617 | margin: 15px; } 618 | main.vue-tut .step { 619 | margin-top: 40px; 620 | margin-bottom: 20px; } 621 | main.vue-tut .steps { 622 | padding-top: 0; } 623 | main.vue-tut .steps > .step-contents { 624 | width: 100%; 625 | margin: 0; } 626 | main.vue-tut .step-contents .step-aside { 627 | display: block; } 628 | main.vue-tut .step-contents .step-aside aside { 629 | display: flex; 630 | align-items: center; 631 | justify-content: center; } 632 | main.vue-tut .step-contents .step-aside pre { 633 | word-wrap: inherit; 634 | white-space: pre; } 635 | main.vue-tut .step-contents .step-aside .highlight-line:after { 636 | width: calc(100vw - 62px) !important; } 637 | main.vue-tut .step-assets { 638 | display: none; } 639 | main.vue-tut .step-wrapper { 640 | padding-bottom: 70px; } 641 | main.vue-tut .step-wrapper:first-child .step { 642 | margin-top: 40px; } } 643 | --------------------------------------------------------------------------------