├── .gitignore ├── _config.yml ├── styles ├── test1.css ├── URL Test.css ├── My+new+style.css ├── Just images.css ├── Teleprompter 2.css ├── Teleprompter.css ├── Ulysses Freestraction Light.css ├── Ulysses+Freestraction+Light.css ├── Academic.css ├── Custom Example.css └── Academic CV.css ├── generate_examples ├── previews │ ├── Amelia.png │ ├── Avenue.png │ ├── Bear.png │ ├── Crim.png │ ├── Emma.png │ ├── Kult.png │ ├── Mouse.png │ ├── Pesto.png │ ├── Yeti.png │ ├── Academia.png │ ├── Academic.png │ ├── Firates.png │ ├── Juridico.png │ ├── Resolute.png │ ├── Simplex.png │ ├── SwissMou.png │ ├── Torpedo.png │ ├── Vostock.png │ ├── FadingFast.png │ ├── Gregarious.png │ ├── Hardstock.png │ ├── Highlighter.png │ ├── Monophile.png │ ├── Pandoctor.png │ ├── Symphonic.png │ ├── academic-cv.png │ ├── PalatinoMemo.png │ ├── Teleprompter.png │ ├── amj-academic.png │ ├── brettterpstra.png │ ├── ChicagoAcademic.png │ ├── academic-review.png │ ├── github-updated.png │ ├── ImageReferencePane.png │ ├── brettterpstra-2023.jpg │ ├── brettterpstra-2023.png │ └── UlyssesFreestractionLight.png ├── images │ ├── add-to-marked.png │ ├── add-to-marked@2x.png │ ├── add-to-marked-hover.png │ ├── add-to-marked-hover@2x.png │ ├── inspect.svg │ ├── inspect-hover.svg │ ├── spinner.svg │ ├── grid.svg │ ├── grid-hover.svg │ ├── preview-circle.svg │ ├── preview-circle-hover.svg │ ├── preview.svg │ ├── preview-hover.svg │ ├── add-to-marked-m.svg │ ├── add-to-marked-m-hover.svg │ ├── add-to-marked-circle.svg │ ├── add-to-marked-circle-hover.svg │ ├── add-to-marked.svg │ └── add-to-marked-hover.svg ├── styles │ ├── Image Reference Pane.css │ ├── Teleprompter.css │ ├── Ulysses Freestraction Light.css │ ├── Academic.css │ ├── Highlighter.css │ ├── Palatino Memo.css │ ├── Swiss Mou.css │ └── academic-cv.css ├── generate_url.cgi ├── preview_template2.html ├── generate.rb ├── preview_template.html └── styles.html ├── Header.css ├── Image Reference Pane.css ├── LICENSE ├── config.rb ├── Teleprompter.css ├── README.md ├── Ulysses Freestraction Light.css ├── sass └── Ulysses Freestraction Light.scss ├── test_markup.md ├── Academic.css ├── Highlighter.css ├── Palatino Memo.css ├── Custom.css ├── Swiss Mou.css ├── academic-cv.css └── Base16 ├── Base16 3024.css └── Base16 Ashes.css /.gitignore: -------------------------------------------------------------------------------- 1 | *.map 2 | buildnotes.md 3 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /styles/test1.css: -------------------------------------------------------------------------------- 1 | body{background:blue} -------------------------------------------------------------------------------- /styles/URL Test.css: -------------------------------------------------------------------------------- 1 | body{background:#000} -------------------------------------------------------------------------------- /styles/My+new+style.css: -------------------------------------------------------------------------------- 1 | body{background:#000} -------------------------------------------------------------------------------- /generate_examples/previews/Amelia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Amelia.png -------------------------------------------------------------------------------- /generate_examples/previews/Avenue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Avenue.png -------------------------------------------------------------------------------- /generate_examples/previews/Bear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Bear.png -------------------------------------------------------------------------------- /generate_examples/previews/Crim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Crim.png -------------------------------------------------------------------------------- /generate_examples/previews/Emma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Emma.png -------------------------------------------------------------------------------- /generate_examples/previews/Kult.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Kult.png -------------------------------------------------------------------------------- /generate_examples/previews/Mouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Mouse.png -------------------------------------------------------------------------------- /generate_examples/previews/Pesto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Pesto.png -------------------------------------------------------------------------------- /generate_examples/previews/Yeti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Yeti.png -------------------------------------------------------------------------------- /generate_examples/previews/Academia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Academia.png -------------------------------------------------------------------------------- /generate_examples/previews/Academic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Academic.png -------------------------------------------------------------------------------- /generate_examples/previews/Firates.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Firates.png -------------------------------------------------------------------------------- /generate_examples/previews/Juridico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Juridico.png -------------------------------------------------------------------------------- /generate_examples/previews/Resolute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Resolute.png -------------------------------------------------------------------------------- /generate_examples/previews/Simplex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Simplex.png -------------------------------------------------------------------------------- /generate_examples/previews/SwissMou.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/SwissMou.png -------------------------------------------------------------------------------- /generate_examples/previews/Torpedo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Torpedo.png -------------------------------------------------------------------------------- /generate_examples/previews/Vostock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Vostock.png -------------------------------------------------------------------------------- /generate_examples/images/add-to-marked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/images/add-to-marked.png -------------------------------------------------------------------------------- /generate_examples/previews/FadingFast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/FadingFast.png -------------------------------------------------------------------------------- /generate_examples/previews/Gregarious.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Gregarious.png -------------------------------------------------------------------------------- /generate_examples/previews/Hardstock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Hardstock.png -------------------------------------------------------------------------------- /generate_examples/previews/Highlighter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Highlighter.png -------------------------------------------------------------------------------- /generate_examples/previews/Monophile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Monophile.png -------------------------------------------------------------------------------- /generate_examples/previews/Pandoctor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Pandoctor.png -------------------------------------------------------------------------------- /generate_examples/previews/Symphonic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Symphonic.png -------------------------------------------------------------------------------- /generate_examples/previews/academic-cv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/academic-cv.png -------------------------------------------------------------------------------- /generate_examples/previews/PalatinoMemo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/PalatinoMemo.png -------------------------------------------------------------------------------- /generate_examples/previews/Teleprompter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/Teleprompter.png -------------------------------------------------------------------------------- /generate_examples/previews/amj-academic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/amj-academic.png -------------------------------------------------------------------------------- /generate_examples/previews/brettterpstra.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/brettterpstra.png -------------------------------------------------------------------------------- /generate_examples/images/add-to-marked@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/images/add-to-marked@2x.png -------------------------------------------------------------------------------- /generate_examples/previews/ChicagoAcademic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/ChicagoAcademic.png -------------------------------------------------------------------------------- /generate_examples/previews/academic-review.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/academic-review.png -------------------------------------------------------------------------------- /generate_examples/previews/github-updated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/github-updated.png -------------------------------------------------------------------------------- /generate_examples/images/add-to-marked-hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/images/add-to-marked-hover.png -------------------------------------------------------------------------------- /generate_examples/previews/ImageReferencePane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/ImageReferencePane.png -------------------------------------------------------------------------------- /generate_examples/previews/brettterpstra-2023.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/brettterpstra-2023.jpg -------------------------------------------------------------------------------- /generate_examples/previews/brettterpstra-2023.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/brettterpstra-2023.png -------------------------------------------------------------------------------- /generate_examples/images/add-to-marked-hover@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/images/add-to-marked-hover@2x.png -------------------------------------------------------------------------------- /generate_examples/previews/UlyssesFreestractionLight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttscoff/MarkedCustomStyles/master/generate_examples/previews/UlyssesFreestractionLight.png -------------------------------------------------------------------------------- /Header.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app 3 | Content is property of the document author 4 | Please leave this notice in place, along with any additional credits below. 5 | --------------------------------------------------------------- 6 | Title: Your style title 7 | Author: Your Name 8 | URL: 9 | Description: Description of theme 10 | Fonts: (optional) [Rockwell, Rokkit, etc.] 11 | Note: (optional) Additional notes, where to get custom fonts, etc. 12 | --- 13 | */ 14 | -------------------------------------------------------------------------------- /styles/Just images.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2011 Brett Terpstra 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Just images 6 | Author: Sid O'Neill http://crateofpenguins.com 7 | Description: Just for image reference. Updated by Brett Terpstra. 8 | */ 9 | 10 | body { 11 | background: #fff; 12 | max-width: 340px; 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | body.inverted { 18 | background: #333; 19 | } 20 | 21 | #wrapper > * { 22 | display: none; 23 | } 24 | 25 | #wrapper > figure, 26 | #wrapper > img { 27 | display: block; 28 | } 29 | 30 | figure, img { 31 | margin:20px; 32 | max-width:340px; 33 | font-size:16px; 34 | line-height:24px; 35 | } 36 | 37 | .inverted figcaption { 38 | color: #eee; 39 | } -------------------------------------------------------------------------------- /Image Reference Pane.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2011 Brett Terpstra 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Just images 6 | Author: Sid O'Neill http://crateofpenguins.com 7 | Description: Just for image reference. Updated by Brett Terpstra. 8 | */ 9 | 10 | body { 11 | background: #fff; 12 | max-width: 340px; 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | body.inverted { 18 | background: #333; 19 | } 20 | 21 | #wrapper > * { 22 | display: none; 23 | } 24 | 25 | #wrapper > figure, 26 | #wrapper > img { 27 | display: block; 28 | } 29 | 30 | figure, img { 31 | margin:20px; 32 | max-width:340px; 33 | font-size:16px; 34 | line-height:24px; 35 | } 36 | 37 | .inverted figcaption { 38 | color: #eee; 39 | } 40 | -------------------------------------------------------------------------------- /generate_examples/styles/Image Reference Pane.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2011 Brett Terpstra 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Just images 6 | Author: Sid O'Neill http://crateofpenguins.com 7 | Description: Just for image reference. Updated by Brett Terpstra. 8 | */ 9 | 10 | body { 11 | background: #fff; 12 | max-width: 340px; 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | body.inverted { 18 | background: #333; 19 | } 20 | 21 | #wrapper > * { 22 | display: none; 23 | } 24 | 25 | #wrapper > figure, 26 | #wrapper > img { 27 | display: block; 28 | } 29 | 30 | figure, img { 31 | margin:20px; 32 | max-width:340px; 33 | font-size:16px; 34 | line-height:24px; 35 | } 36 | 37 | .inverted figcaption { 38 | color: #eee; 39 | } 40 | -------------------------------------------------------------------------------- /generate_examples/images/inspect.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /generate_examples/images/inspect-hover.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /generate_examples/generate_url.cgi: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require 'cgi' 3 | require 'uri' 4 | 5 | cgi = CGI.new 6 | p = cgi.params 7 | 8 | print cgi.header( 'type' => 'application/json','expires' => Time.now - (180) ) 9 | 10 | def die_error(msg, error) 11 | err = error.strip.gsub(/\n+/,' | ').gsub(/(?:\/[^\/]+)+\/([^\/]+\.\w+)/,'\1') 12 | print %Q{{"success": false, "error": "#{msg}", "message": "#{err}"}} 13 | Process.exit 14 | end 15 | 16 | if ARGV.length == 0 17 | url = p['style'][0].to_s || false 18 | title = p['name'][0].to_s || false 19 | else 20 | title = CGI.unescape(ARGV[0].to_s) || false 21 | url = CGI.unescape(ARGV[1].to_s) || false 22 | end 23 | 24 | begin 25 | css = IO.read(File.expand_path(url)).force_encoding('utf-8'); 26 | encoded = CGI.escape(css.strip).gsub(/=/,'%3D').gsub(/&/,'%26').gsub(/\+/, '%20') 27 | print %({"success": true, "url": "x-marked://addstyle?name=#{CGI.escape(title)}&css=#{encoded}" }) 28 | rescue Exception => e 29 | die_error("Failed to read style", e.message) 30 | end 31 | -------------------------------------------------------------------------------- /generate_examples/images/spinner.svg: -------------------------------------------------------------------------------- 1 | 2 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License Copyright (c) 2025 Brett Terpstra 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is furnished 8 | to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice (including the next 11 | paragraph) shall be included in all copies or substantial portions of the 12 | Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 16 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS 17 | OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 18 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF 19 | OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /generate_examples/images/grid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /generate_examples/images/grid-hover.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # Tell compass where to find local extensions 4 | # If you followed directions and ran 'gem install modular-scale' comment the next two lines out: 5 | extensions_dir = "sass/extensions" 6 | Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale")) 7 | 8 | sass_options = { :cache_location => '/tmp/sass_cache' } 9 | 10 | # Set this to the root of your project when deployed: 11 | http_path = "/" 12 | css_dir = "" 13 | sass_dir = "sass" 14 | images_dir = "images" 15 | 16 | # You can select your preferred output style here (can be overridden via the command line) :nested or :expanded or :compact or :compressed: 17 | output_style = :expanded 18 | 19 | # To enable relative paths to assets via compass helper functions. Uncomment: 20 | # relative_assets = true 21 | 22 | # To disable debugging comments that display the original location of your selectors. Uncomment: 23 | line_comments = false 24 | 25 | 26 | # If you prefer the indented syntax, you might want to regenerate this 27 | # project again passing --syntax sass, or you can uncomment this: 28 | # preferred_syntax = :sass 29 | # and then run: 30 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 31 | -------------------------------------------------------------------------------- /generate_examples/images/preview-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /generate_examples/images/preview-circle-hover.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /styles/Teleprompter 2.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Teleprompter 6 | Author: Brett Terpstra 7 | Description: Use Marked as a Teleprompter ("s" to autoscroll) 8 | */ 9 | body { 10 | font-size: 40px; 11 | line-height: 2; 12 | background-color: #3f3f3f; 13 | background-image: linear-gradient(0deg, #3f3f3f 25%, #1d1d1d 25%, #1d1d1d 75%, #3f3f3f 75%); 14 | font-family: Helvetica; 15 | color: #fff; 16 | background-attachment: fixed; } 17 | 18 | a { 19 | color: #fff; 20 | text-decoration: none; } 21 | 22 | #wrapper { 23 | padding: 50% 25px; 24 | width: 100%; 25 | overflow: visible; 26 | box-sizing: border-box; 27 | width: 80vw !important; 28 | max-width: 30ch !important; 29 | margin: 0 auto; } 30 | 31 | #wrapper h1, #wrapper h2, #wrapper h3, #wrapper h4, #wrapper h5, #wrapper h6, #wrapper blockquote { 32 | display: none; } 33 | 34 | ul, ol { 35 | list-style-position: outside; 36 | text-indent: 0; 37 | padding: 0; 38 | margin: 0; } 39 | 40 | ul ul, ul ol { 41 | margin-left: 30px; } 42 | 43 | ol ul, ol ol { 44 | margin-left: 30px; } 45 | 46 | img { 47 | width: 200px; 48 | height: auto; } 49 | 50 | hr { 51 | border: 0; 52 | border-top: dashed 4px; 53 | margin: 2em 0; } 54 | 55 | blockquote { 56 | margin: 0; 57 | font-style: italic; } 58 | blockquote p::before { 59 | content: '> '; 60 | position: absolute; 61 | left: -1em; } 62 | 63 | #wrapper pre { 64 | word-wrap: break-word; 65 | white-space: pre-wrap; } 66 | 67 | dt { 68 | font-weight: 600; } 69 | 70 | dd { 71 | margin: 0; } 72 | dd::before { 73 | content: ': '; } 74 | 75 | /*# sourceMappingURL=Teleprompter%202.css.map */ 76 | -------------------------------------------------------------------------------- /generate_examples/images/preview.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /generate_examples/images/preview-hover.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /generate_examples/preview_template2.html: -------------------------------------------------------------------------------- 1 |
2 |

Marked Custom Styles

3 | 4 |

A collection of custom styles available for Marked 2. Have your own and want to share? Use the Custom Style Uploader to submit for review.

6 | 7 |

If you're browsing on a Mac with Marked 2 installed, you can click the Install button on any style to instantly add it to Marked. If you'd rather 9 | install manually, just use the CSS link to save the style to disk, then use the Custom Styles section of the 10 | Preferences->Style pane to add it.

11 | 12 |

To view all source files, including the default styles, visit the GitHub repository.

14 | 15 |
    16 | %%previews%% 17 |
18 |
19 | 20 | 21 | 22 | 53 | 54 | -------------------------------------------------------------------------------- /Teleprompter.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Teleprompter 6 | Author: Brett Terpstra 7 | Description: Use Marked as a Teleprompter ("s" to autoscroll) 8 | */ 9 | body { 10 | font-size: 40px; 11 | line-height: 2; 12 | background-color: rgba(63, 63, 63, 1); 13 | background-image: linear-gradient(0deg, rgba(63, 63, 63, 1) 25%, rgba(29, 29, 29, 1) 25%, rgba(29, 29, 29, 1) 75%, rgba(63, 63, 63, 1) 75%); 14 | font-family: Helvetica; 15 | color: #fff; 16 | background-attachment: fixed; 17 | } 18 | a { 19 | color: #fff; 20 | text-decoration: none; 21 | } 22 | #wrapper { 23 | padding: 50% 25px; 24 | width: 100%; 25 | overflow: visible; 26 | box-sizing: border-box; 27 | width: 80vw!important; 28 | max-width: 30ch!important; 29 | margin: 0 auto; 30 | } 31 | body:before { 32 | content:' '; 33 | display: block; 34 | position: fixed; 35 | left: 0; 36 | right: 0; 37 | top: 45%; 38 | height: 80px; 39 | background: rgba(219, 212, 105, .25); 40 | } 41 | h1, h2, h3, h4, h5, h6 { 42 | font-size: 1em; 43 | } 44 | ul, ol { 45 | list-style-position: outside; 46 | text-indent: 0; 47 | padding: 0; 48 | margin: 0; 49 | } 50 | ul ul, ul ol, ol ul, ol ol { 51 | margin-left: 30px; 52 | } 53 | h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { 54 | display: block; 55 | position: absolute; 56 | width: 70px; 57 | left: -80px; 58 | text-align: right; 59 | } 60 | h1:before { 61 | content:'#'; 62 | } 63 | h2:before { 64 | content:'##'; 65 | } 66 | h3:before { 67 | content:'###'; 68 | } 69 | h4:before { 70 | content:'-'; 71 | } 72 | h5:before { 73 | content:'--'; 74 | } 75 | h6:before { 76 | content:'---'; 77 | } 78 | 79 | img { 80 | width: 200px; 81 | height: auto; 82 | } 83 | 84 | hr { 85 | border: 0; 86 | border-top: dashed 4px; 87 | margin: 2em 0; 88 | } 89 | 90 | blockquote { 91 | margin: 0; 92 | font-style: italic; 93 | } 94 | 95 | blockquote p::before { 96 | content: '> '; 97 | position: absolute; 98 | left: -1em; 99 | } 100 | 101 | #wrapper pre { 102 | word-wrap: break-word; 103 | white-space: pre-wrap; 104 | } 105 | 106 | dt { 107 | font-weight: 600; 108 | } 109 | 110 | dd { 111 | margin: 0; 112 | } 113 | 114 | dd::before { 115 | content: ': '; 116 | } 117 | -------------------------------------------------------------------------------- /styles/Teleprompter.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Teleprompter 6 | Author: Brett Terpstra 7 | Description: Use Marked as a Teleprompter ("s" to autoscroll) 8 | */ 9 | body { 10 | font-size: 40px; 11 | line-height: 2; 12 | background-color: rgba(63, 63, 63, 1); 13 | background-image: linear-gradient(0deg, rgba(63, 63, 63, 1) 25%, rgba(29, 29, 29, 1) 25%, rgba(29, 29, 29, 1) 75%, rgba(63, 63, 63, 1) 75%); 14 | font-family: Helvetica; 15 | color: #fff; 16 | background-attachment: fixed; 17 | } 18 | a { 19 | color: #fff; 20 | text-decoration: none; 21 | } 22 | #wrapper { 23 | padding: 50% 25px; 24 | width: 100%; 25 | overflow: visible; 26 | box-sizing: border-box; 27 | width: 80vw!important; 28 | max-width: 30ch!important; 29 | margin: 0 auto; 30 | } 31 | body:before { 32 | content:' '; 33 | display: block; 34 | position: fixed; 35 | left: 0; 36 | right: 0; 37 | top: 45%; 38 | height: 80px; 39 | background: rgba(219, 212, 105, .25); 40 | } 41 | h1, h2, h3, h4, h5, h6 { 42 | font-size: 1em; 43 | } 44 | ul, ol { 45 | list-style-position: outside; 46 | text-indent: 0; 47 | padding: 0; 48 | margin: 0; 49 | } 50 | ul ul, ul ol, ol ul, ol ol { 51 | margin-left: 30px; 52 | } 53 | h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { 54 | display: block; 55 | position: absolute; 56 | width: 70px; 57 | left: -80px; 58 | text-align: right; 59 | } 60 | h1:before { 61 | content:'#'; 62 | } 63 | h2:before { 64 | content:'##'; 65 | } 66 | h3:before { 67 | content:'###'; 68 | } 69 | h4:before { 70 | content:'-'; 71 | } 72 | h5:before { 73 | content:'--'; 74 | } 75 | h6:before { 76 | content:'---'; 77 | } 78 | 79 | img { 80 | width: 200px; 81 | height: auto; 82 | } 83 | 84 | hr { 85 | border: 0; 86 | border-top: dashed 4px; 87 | margin: 2em 0; 88 | } 89 | 90 | blockquote { 91 | margin: 0; 92 | font-style: italic; 93 | } 94 | 95 | blockquote p::before { 96 | content: '> '; 97 | position: absolute; 98 | left: -1em; 99 | } 100 | 101 | #wrapper pre { 102 | word-wrap: break-word; 103 | white-space: pre-wrap; 104 | } 105 | 106 | dt { 107 | font-weight: 600; 108 | } 109 | 110 | dd { 111 | margin: 0; 112 | } 113 | 114 | dd::before { 115 | content: ': '; 116 | } -------------------------------------------------------------------------------- /generate_examples/styles/Teleprompter.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Teleprompter 6 | Author: Brett Terpstra 7 | Description: Use Marked as a Teleprompter ("s" to autoscroll) 8 | */ 9 | body { 10 | font-size: 40px; 11 | line-height: 2; 12 | background-color: rgba(63, 63, 63, 1); 13 | background-image: linear-gradient(0deg, rgba(63, 63, 63, 1) 25%, rgba(29, 29, 29, 1) 25%, rgba(29, 29, 29, 1) 75%, rgba(63, 63, 63, 1) 75%); 14 | font-family: Helvetica; 15 | color: #fff; 16 | background-attachment: fixed; 17 | } 18 | a { 19 | color: #fff; 20 | text-decoration: none; 21 | } 22 | #wrapper { 23 | padding: 50% 25px; 24 | width: 100%; 25 | overflow: visible; 26 | box-sizing: border-box; 27 | width: 80vw!important; 28 | max-width: 30ch!important; 29 | margin: 0 auto; 30 | } 31 | body:before { 32 | content:' '; 33 | display: block; 34 | position: fixed; 35 | left: 0; 36 | right: 0; 37 | top: 45%; 38 | height: 80px; 39 | background: rgba(219, 212, 105, .25); 40 | } 41 | h1, h2, h3, h4, h5, h6 { 42 | font-size: 1em; 43 | } 44 | ul, ol { 45 | list-style-position: outside; 46 | text-indent: 0; 47 | padding: 0; 48 | margin: 0; 49 | } 50 | ul ul, ul ol, ol ul, ol ol { 51 | margin-left: 30px; 52 | } 53 | h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { 54 | display: block; 55 | position: absolute; 56 | width: 70px; 57 | left: -80px; 58 | text-align: right; 59 | } 60 | h1:before { 61 | content:'#'; 62 | } 63 | h2:before { 64 | content:'##'; 65 | } 66 | h3:before { 67 | content:'###'; 68 | } 69 | h4:before { 70 | content:'-'; 71 | } 72 | h5:before { 73 | content:'--'; 74 | } 75 | h6:before { 76 | content:'---'; 77 | } 78 | 79 | img { 80 | width: 200px; 81 | height: auto; 82 | } 83 | 84 | hr { 85 | border: 0; 86 | border-top: dashed 4px; 87 | margin: 2em 0; 88 | } 89 | 90 | blockquote { 91 | margin: 0; 92 | font-style: italic; 93 | } 94 | 95 | blockquote p::before { 96 | content: '> '; 97 | position: absolute; 98 | left: -1em; 99 | } 100 | 101 | #wrapper pre { 102 | word-wrap: break-word; 103 | white-space: pre-wrap; 104 | } 105 | 106 | dt { 107 | font-weight: 600; 108 | } 109 | 110 | dd { 111 | margin: 0; 112 | } 113 | 114 | dd::before { 115 | content: ': '; 116 | } 117 | -------------------------------------------------------------------------------- /generate_examples/images/add-to-marked-m.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /generate_examples/images/add-to-marked-m-hover.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /generate_examples/generate.rb: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require 'json' 3 | require 'fileutils' 4 | require 'uri' 5 | require 'cgi' 6 | 7 | def get_meta(file) 8 | content = IO.read(file) 9 | data = { 10 | 'title' => '', 11 | 'author' => '', 12 | 'description' => '' 13 | } 14 | title = content.match(/^\s*Title:(.*?)$/i) 15 | data['title'] = title[1].strip if title 16 | 17 | author = content.match(/^\s*Author:(.*?)$/i) 18 | data['author'] = author[1].strip if author 19 | 20 | description = content.match(/^\s*Description:(.*?)$/i) 21 | data['description'] = description[1].strip if description 22 | 23 | data 24 | end 25 | 26 | def generate_options 27 | metadata = {} 28 | options = [] 29 | previews = [] 30 | ignored_styles = ['Header.css', 'Custom.css'] 31 | files = Dir.glob('../*.css').sort_by(&:downcase) 32 | # files.concat(Dir.glob('../*/*.css')) 33 | files.each do |f| 34 | # style = File.basename(f,".css") 35 | next if File.basename(File.dirname(f)) == File.basename(Dir.pwd) || ignored_styles.include?(File.basename(f)) 36 | Dir.mkdir("styles") unless File.directory?("styles") 37 | FileUtils.cp(f, "styles") 38 | style = File.basename(f,".css") 39 | meta = get_meta(f) 40 | metadata[style] = meta 41 | options.push(%Q{}) 42 | if File.exist?("previews/#{style.gsub(/ /,'')}.png") 43 | preview = %Q{
  • } 44 | 45 | preview += %Q{

    #{meta['title']}

    } 46 | 47 | preview += %Q{} 48 | preview += %Q{} 49 | preview += %Q{} 50 | preview += %Q{} 51 | 52 | preview += %Q{} 53 | preview += %Q{} 54 | preview += %Q{} 55 | preview += %Q{
    } 56 | preview += %Q{

    by #{meta['author']}

    } 57 | preview += %Q{

    #{meta['description']}

    } 58 | preview += %Q{
    • } 59 | previews.push(preview) 60 | end 61 | end 62 | { 63 | :stylemenu => options.join("\n"), 64 | :previews => previews.join("\n"), 65 | :meta => metadata 66 | } 67 | end 68 | 69 | styles = generate_options 70 | 71 | template = IO.read('template.html') 72 | 73 | File.open('preview.html', 'w') do |f| 74 | output = template.sub(/%%metadata%%/, styles[:meta].to_json) 75 | output.sub!(/%%stylemenu%%/, styles[:stylemenu]) 76 | f.puts output 77 | end 78 | 79 | template = IO.read('preview_template2.html') 80 | 81 | File.open('body.html', 'w') do |f| 82 | f.puts template.sub(/%%stylemenu%%/, styles[:stylemenu]).sub(/%%previews%%/, styles[:previews]) 83 | end 84 | 85 | source = File.expand_path('../generate_examples') 86 | target = File.expand_path('~/Sites/dev/marked2app/styles') 87 | FileUtils.copy_entry(source, target, false, false, true) 88 | -------------------------------------------------------------------------------- /styles/Ulysses Freestraction Light.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Ulysses Freestraction Light 6 | Author: Jonathan Poritsky 7 | Description: Based on the Freestraction color scheme used in Ulysses III . 8 | For more information read the introductory post: http://candlerblog.com/2013/04/11/ulysses-iii-and-marked/ 9 | */ 10 | 11 | html { 12 | background-color: #f3f3f3; 13 | color: #656565; 14 | } 15 | body { 16 | margin-left:auto; 17 | margin-right:auto; 18 | padding: 2em; 19 | border: 0; 20 | font-size: 1em; 21 | line-height: 1.7em; 22 | font-family: "Source Sans Pro","Helvetica Neue",Helvetica,sans-serif; 23 | } 24 | a { 25 | padding:0 0.3em 0.1em 0.3em; 26 | color: #656565; 27 | background: #f7f7f7; 28 | text-decoration:none; 29 | border: 1px solid #d4d4d4; 30 | border-radius: 4px; 31 | } 32 | a:hover { 33 | padding:0 0.3em 0.1em 0.3em; 34 | text-decoration: none; 35 | background:-webkit-gradient(linear, 80% 20%, 80% 100%, from(#315983), to(#224C78)); 36 | color: #f7ffff; 37 | border-top: 1px solid rgb(69,105,143); 38 | border-bottom: 1px solid rgb(47,76,105); 39 | border-right: 1px solid rgb(47,76,105); 40 | border-left: 1px solid rgb(47,76,105); 41 | border-radius: 4px; 42 | box-shadow: 0px 0px 0px 1px rgb(47,76,105);; 43 | } 44 | h1, h2, h3, h4, h5, h6 { 45 | text-align: center; 46 | color: rgb(12,139,186); 47 | line-height: 1; 48 | font-weight: 600; 49 | font-family: "Minion Pro","Chaparral Pro",Georgia,serif; 50 | } 51 | 52 | h1 { 53 | font-size: 2em; 54 | } 55 | h2 { 56 | font-size: 1.6em; 57 | } 58 | h3 { 59 | font-size: 1.4em; 60 | } 61 | h4 { 62 | font-size: 1.2em; 63 | } 64 | h5 { 65 | font-size: 1.1em; 66 | } 67 | h6 { 68 | font-style: italic; 69 | font-size: 1em; 70 | } 71 | 72 | ol, ul { 73 | margin-left: -15px; 74 | margin-right: 25px; 75 | } 76 | 77 | ul li { 78 | list-style: none; 79 | } 80 | 81 | ul li:before { 82 | content:'\2010'; 83 | display: block; 84 | position: relative; 85 | max-width: 0; 86 | max-height: 0; 87 | left: -.8em; 88 | top: -.1em; 89 | color: rgb(12,139,186); 90 | font-size:1.2em; 91 | } 92 | 93 | 94 | 95 | li { 96 | font-size: .9em; 97 | } 98 | 99 | li p { 100 | -webkit-margin-before: 0; 101 | -webkit-margin-after: 0; 102 | } 103 | 104 | .footnote { 105 | font-size: 50%; 106 | vertical-align: super; 107 | } 108 | div.footnotes { 109 | font-size: 80%; 110 | } 111 | pre, code { 112 | white-space: pre-wrap; 113 | } 114 | blockquote { 115 | background:rgb(230,230,230); 116 | display: block; 117 | font-style:italic; 118 | font-weight:200; 119 | color: rgb(12,139,186); 120 | padding:0.2em 2em 0.2em 2em; 121 | -webkit-margin-before: 1em; 122 | -webkit-margin-after: 1em; 123 | -webkit-margin-start: 0; 124 | -webkit-margin-end: 0; 125 | } 126 | 127 | code { 128 | font-family: Inconsolata,"Courier Prime",mono; 129 | font-size:80%; 130 | padding: 2px; 131 | color: rgb(20,126,73); 132 | background: rgb(224,232,228); 133 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 2 | 3 | # Custom Styles for [Marked 2](http://marked2app.com) 4 | 5 | Want a quick look at some of the current styles in this repository? [Browse the gallery.](https://marked2app.com/styles/) 6 | 7 | Please feel free to fork and submit new styles! If you're not a Github user and you'd like to contribute, just [drop me a line](http://brettterpstra.com/contact/). 8 | 9 | Please customize and include the contents of `Header.css` in any submitted styles. The portion between the `---` borders should be in YAML format. 10 | 11 | ```css 12 | /* 13 | This document has been created with Marked.app 14 | Content is property of the document author 15 | Please leave this notice in place, along with any additional credits below. 16 | --------------------------------------------------------------- 17 | Title: Your style title 18 | Author: Your Name 19 | URL: 20 | Description: Description of theme 21 | Fonts: (optional) [Rockwell, Rokkit, etc.] 22 | Note: (optional) Additional notes, where to get custom fonts, etc. 23 | --- 24 | */ 25 | ``` 26 | 27 | ### Using a Style 28 | 29 | When viewed through the gallery, every style has an "Install" button that will automatically save and load the Custom Style in Marked for you. 30 | 31 | To install manually: 32 | 33 | 1. Save the CSS file to your disk. You can open any Style in the list and then hit the "Raw" button to get a file ready for "Save to...". I suggest saving to `~/Library/Application Support/Marked 2/Custom CSS`, as (at some point) in the future Marked will read from that folder automatically. 34 | 35 | 2. Then, open up the Style Preferences in Marked and click the "+" button under the Custom Styles list. Locate the file and select it. Now it will appear in your Styles dropdown selection and you can optionally make it the default window style. 36 | 37 | Custom Styles are added to the keyboard menu under Command-Opt-#, where # is 1-9 in the order they're added. 38 | 39 | ### Creating a Style 40 | 41 | I've been creating my styles with [Compass and Sass](http://compass-style.org/), with a [document containing a full range of markup elements](https://raw.github.com/ttscoff/MarkedCustomStyles/master/test_markup.md) for testing. I just turn on `compass watch` and point Marked's Style to the output CSS file. Turn on "Track CSS Changes" under the Style list in Marked, and every time Compass compiles, Marked will update without refreshing the page (LiveReload-style injection). You can use whatever you like, including directly editing plain CSS. 42 | 43 | The document markup hasn't changed between v1 and v2 of Marked, so the [original style guide](https://marked2app.com/help/Writing_Custom_CSS.html) still applies. There are just a few things to worry about for full compatibility. Inverted styles, poetry mode and print settings. However, submissions that lack any of these are still accepted, as people can add their own if they need to. 44 | 45 | The one thing your Style does need (aside from looking great in Marked), is the [Header.css](https://github.com/ttscoff/MarkedCustomStyles/blob/master/Header.css) information, customized to your Style. Just stick it at the top. 46 | 47 | Thanks, and I hope you'll consider sharing the custom styles you create, even if they're revisions and evolutions of existing styles! 48 | -------------------------------------------------------------------------------- /Ulysses Freestraction Light.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Ulysses Freestraction Light 6 | Author: Jonathan Poritsky 7 | Description: Based on the Freestraction color scheme used in Ulysses III . 8 | For more information read the introductory post: http://candlerblog.com/2013/04/11/ulysses-iii-and-marked/ 9 | */ 10 | html { 11 | background-color: #f3f3f3; 12 | color: #656565; 13 | } 14 | 15 | body { 16 | margin-left: auto; 17 | margin-right: auto; 18 | padding: 2em; 19 | border: 0; 20 | font-size: 1em; 21 | line-height: 1.7em; 22 | font-family: "Source Sans Pro","Helvetica Neue",Helvetica,sans-serif; 23 | } 24 | 25 | a { 26 | padding: 0 0.3em 0.1em 0.3em; 27 | color: #656565; 28 | background: #f7f7f7; 29 | text-decoration: none; 30 | border: 1px solid #d4d4d4; 31 | border-radius: 4px; 32 | } 33 | a:hover { 34 | padding: 0 0.3em 0.1em 0.3em; 35 | text-decoration: none; 36 | background: -webkit-gradient(linear, 80% 20%, 80% 100%, from(#315983), to(#224C78)); 37 | color: #f7ffff; 38 | border-top: 1px solid #45698f; 39 | border-bottom: 1px solid #2f4c69; 40 | border-right: 1px solid #2f4c69; 41 | border-left: 1px solid #2f4c69; 42 | border-radius: 4px; 43 | box-shadow: 0px 0px 0px 1px #2f4c69; 44 | } 45 | 46 | h1, h2, h3, h4, h5, h6 { 47 | text-align: center; 48 | color: #0c8bba; 49 | line-height: 1; 50 | font-weight: 600; 51 | font-family: "Minion Pro","Chaparral Pro",Georgia,serif; 52 | } 53 | 54 | h1 { 55 | font-size: 2em; 56 | } 57 | 58 | h2 { 59 | font-size: 1.6em; 60 | } 61 | 62 | h3 { 63 | font-size: 1.4em; 64 | } 65 | 66 | h4 { 67 | font-size: 1.2em; 68 | } 69 | 70 | h5 { 71 | font-size: 1.1em; 72 | } 73 | 74 | h6 { 75 | font-style: italic; 76 | font-size: 1em; 77 | } 78 | 79 | ol { 80 | margin-left: -15px; 81 | margin-right: 25px; 82 | } 83 | 84 | ul { 85 | margin-left: -15px; 86 | margin-right: 25px; 87 | } 88 | ul li { 89 | list-style: none; 90 | } 91 | ul li:before { 92 | content: '\2010'; 93 | display: block; 94 | position: relative; 95 | max-width: 0; 96 | max-height: 0; 97 | left: -.8em; 98 | top: -.1em; 99 | color: #0c8bba; 100 | font-size: 1.2em; 101 | } 102 | 103 | li { 104 | font-size: .9em; 105 | } 106 | li p { 107 | -webkit-margin-before: 0; 108 | -webkit-margin-after: 0; 109 | } 110 | 111 | .footnote { 112 | font-size: 50%; 113 | vertical-align: super; 114 | } 115 | 116 | div.footnotes { 117 | font-size: 80%; 118 | } 119 | 120 | pre, code { 121 | white-space: pre-wrap; 122 | } 123 | 124 | blockquote { 125 | background: #e6e6e6; 126 | display: block; 127 | font-style: italic; 128 | font-weight: 200; 129 | color: #0c8bba; 130 | padding: 0.2em 2em 0.2em 2em; 131 | -webkit-margin-before: 1em; 132 | -webkit-margin-after: 1em; 133 | -webkit-margin-start: 0; 134 | -webkit-margin-end: 0; 135 | } 136 | 137 | code { 138 | font-family: Inconsolata,"Courier Prime",mono; 139 | font-size: 80%; 140 | padding: 2px; 141 | color: #147e49; 142 | background: #e0e8e4; 143 | } 144 | -------------------------------------------------------------------------------- /styles/Ulysses+Freestraction+Light.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Ulysses Freestraction Light 6 | Author: Jonathan Poritsky 7 | Description: Based on the Freestraction color scheme used in Ulysses III . 8 | For more information read the introductory post: http://candlerblog.com/2013/04/11/ulysses-iii-and-marked/ 9 | */ 10 | html { 11 | background-color: #f3f3f3; 12 | color: #656565; 13 | } 14 | 15 | body { 16 | margin-left: auto; 17 | margin-right: auto; 18 | padding: 2em; 19 | border: 0; 20 | font-size: 1em; 21 | line-height: 1.7em; 22 | font-family: "Source Sans Pro","Helvetica Neue",Helvetica,sans-serif; 23 | } 24 | 25 | a { 26 | padding: 0 0.3em 0.1em 0.3em; 27 | color: #656565; 28 | background: #f7f7f7; 29 | text-decoration: none; 30 | border: 1px solid #d4d4d4; 31 | border-radius: 4px; 32 | } 33 | a:hover { 34 | padding: 0 0.3em 0.1em 0.3em; 35 | text-decoration: none; 36 | background: -webkit-gradient(linear, 80% 20%, 80% 100%, from(#315983), to(#224C78)); 37 | color: #f7ffff; 38 | border-top: 1px solid #45698f; 39 | border-bottom: 1px solid #2f4c69; 40 | border-right: 1px solid #2f4c69; 41 | border-left: 1px solid #2f4c69; 42 | border-radius: 4px; 43 | box-shadow: 0px 0px 0px 1px #2f4c69; 44 | } 45 | 46 | h1, h2, h3, h4, h5, h6 { 47 | text-align: center; 48 | color: #0c8bba; 49 | line-height: 1; 50 | font-weight: 600; 51 | font-family: "Minion Pro","Chaparral Pro",Georgia,serif; 52 | } 53 | 54 | h1 { 55 | font-size: 2em; 56 | } 57 | 58 | h2 { 59 | font-size: 1.6em; 60 | } 61 | 62 | h3 { 63 | font-size: 1.4em; 64 | } 65 | 66 | h4 { 67 | font-size: 1.2em; 68 | } 69 | 70 | h5 { 71 | font-size: 1.1em; 72 | } 73 | 74 | h6 { 75 | font-style: italic; 76 | font-size: 1em; 77 | } 78 | 79 | ol { 80 | margin-left: -15px; 81 | margin-right: 25px; 82 | } 83 | 84 | ul { 85 | margin-left: -15px; 86 | margin-right: 25px; 87 | } 88 | ul li { 89 | list-style: none; 90 | } 91 | ul li:before { 92 | content: '\2010'; 93 | display: block; 94 | position: relative; 95 | max-width: 0; 96 | max-height: 0; 97 | left: -.8em; 98 | top: -.1em; 99 | color: #0c8bba; 100 | font-size: 1.2em; 101 | } 102 | 103 | li { 104 | font-size: .9em; 105 | } 106 | li p { 107 | -webkit-margin-before: 0; 108 | -webkit-margin-after: 0; 109 | } 110 | 111 | .footnote { 112 | font-size: 50%; 113 | vertical-align: super; 114 | } 115 | 116 | div.footnotes { 117 | font-size: 80%; 118 | } 119 | 120 | pre, code { 121 | white-space: pre-wrap; 122 | } 123 | 124 | blockquote { 125 | background: #e6e6e6; 126 | display: block; 127 | font-style: italic; 128 | font-weight: 200; 129 | color: #0c8bba; 130 | padding: 0.2em 2em 0.2em 2em; 131 | -webkit-margin-before: 1em; 132 | -webkit-margin-after: 1em; 133 | -webkit-margin-start: 0; 134 | -webkit-margin-end: 0; 135 | } 136 | 137 | code { 138 | font-family: Inconsolata,"Courier Prime",mono; 139 | font-size: 80%; 140 | padding: 2px; 141 | color: #147e49; 142 | background: #e0e8e4; 143 | } -------------------------------------------------------------------------------- /generate_examples/images/add-to-marked-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /generate_examples/styles/Ulysses Freestraction Light.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Ulysses Freestraction Light 6 | Author: Jonathan Poritsky 7 | Description: Based on the Freestraction color scheme used in Ulysses III . 8 | For more information read the introductory post: http://candlerblog.com/2013/04/11/ulysses-iii-and-marked/ 9 | */ 10 | html { 11 | background-color: #f3f3f3; 12 | color: #656565; 13 | } 14 | 15 | body { 16 | margin-left: auto; 17 | margin-right: auto; 18 | padding: 2em; 19 | border: 0; 20 | font-size: 1em; 21 | line-height: 1.7em; 22 | font-family: "Source Sans Pro","Helvetica Neue",Helvetica,sans-serif; 23 | } 24 | 25 | a { 26 | padding: 0 0.3em 0.1em 0.3em; 27 | color: #656565; 28 | background: #f7f7f7; 29 | text-decoration: none; 30 | border: 1px solid #d4d4d4; 31 | border-radius: 4px; 32 | } 33 | a:hover { 34 | padding: 0 0.3em 0.1em 0.3em; 35 | text-decoration: none; 36 | background: -webkit-gradient(linear, 80% 20%, 80% 100%, from(#315983), to(#224C78)); 37 | color: #f7ffff; 38 | border-top: 1px solid #45698f; 39 | border-bottom: 1px solid #2f4c69; 40 | border-right: 1px solid #2f4c69; 41 | border-left: 1px solid #2f4c69; 42 | border-radius: 4px; 43 | box-shadow: 0px 0px 0px 1px #2f4c69; 44 | } 45 | 46 | h1, h2, h3, h4, h5, h6 { 47 | text-align: center; 48 | color: #0c8bba; 49 | line-height: 1; 50 | font-weight: 600; 51 | font-family: "Minion Pro","Chaparral Pro",Georgia,serif; 52 | } 53 | 54 | h1 { 55 | font-size: 2em; 56 | } 57 | 58 | h2 { 59 | font-size: 1.6em; 60 | } 61 | 62 | h3 { 63 | font-size: 1.4em; 64 | } 65 | 66 | h4 { 67 | font-size: 1.2em; 68 | } 69 | 70 | h5 { 71 | font-size: 1.1em; 72 | } 73 | 74 | h6 { 75 | font-style: italic; 76 | font-size: 1em; 77 | } 78 | 79 | ol { 80 | margin-left: -15px; 81 | margin-right: 25px; 82 | } 83 | 84 | ul { 85 | margin-left: -15px; 86 | margin-right: 25px; 87 | } 88 | ul li { 89 | list-style: none; 90 | } 91 | ul li:before { 92 | content: '\2010'; 93 | display: block; 94 | position: relative; 95 | max-width: 0; 96 | max-height: 0; 97 | left: -.8em; 98 | top: -.1em; 99 | color: #0c8bba; 100 | font-size: 1.2em; 101 | } 102 | 103 | li { 104 | font-size: .9em; 105 | } 106 | li p { 107 | -webkit-margin-before: 0; 108 | -webkit-margin-after: 0; 109 | } 110 | 111 | .footnote { 112 | font-size: 50%; 113 | vertical-align: super; 114 | } 115 | 116 | div.footnotes { 117 | font-size: 80%; 118 | } 119 | 120 | pre, code { 121 | white-space: pre-wrap; 122 | } 123 | 124 | blockquote { 125 | background: #e6e6e6; 126 | display: block; 127 | font-style: italic; 128 | font-weight: 200; 129 | color: #0c8bba; 130 | padding: 0.2em 2em 0.2em 2em; 131 | -webkit-margin-before: 1em; 132 | -webkit-margin-after: 1em; 133 | -webkit-margin-start: 0; 134 | -webkit-margin-end: 0; 135 | } 136 | 137 | code { 138 | font-family: Inconsolata,"Courier Prime",mono; 139 | font-size: 80%; 140 | padding: 2px; 141 | color: #147e49; 142 | background: #e0e8e4; 143 | } 144 | -------------------------------------------------------------------------------- /generate_examples/images/add-to-marked-circle-hover.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/Ulysses Freestraction Light.scss: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Ulysses Freestraction Light 6 | Author: Jonathan Poritsky 7 | Description: Based on the Freestraction color scheme used in Ulysses III . 8 | For more information read the introductory post: http://candlerblog.com/2013/04/11/ulysses-iii-and-marked/ 9 | */ 10 | 11 | html { 12 | background-color: #f3f3f3; 13 | color: #656565; 14 | } 15 | 16 | body { 17 | margin-left: auto; 18 | margin-right: auto; 19 | padding: 2em; 20 | border: 0; 21 | font-size: 1em; 22 | line-height: 1.7em; 23 | font-family: "Source Sans Pro","Helvetica Neue",Helvetica,sans-serif; 24 | } 25 | 26 | a { 27 | padding: 0 0.3em 0.1em 0.3em; 28 | color: #656565; 29 | background: #f7f7f7; 30 | text-decoration: none; 31 | border: 1px solid #d4d4d4; 32 | border-radius: 4px; 33 | 34 | &:hover { 35 | padding: 0 0.3em 0.1em 0.3em; 36 | text-decoration: none; 37 | background: -webkit-gradient(linear, 80% 20%, 80% 100%, from(#315983), to(#224C78)); 38 | color: #f7ffff; 39 | border-top: 1px solid rgb(69, 105, 143); 40 | border-bottom: 1px solid rgb(47, 76, 105); 41 | border-right: 1px solid rgb(47, 76, 105); 42 | border-left: 1px solid rgb(47, 76, 105); 43 | border-radius: 4px; 44 | box-shadow: 0px 0px 0px 1px rgb(47, 76, 105); 45 | } 46 | } 47 | 48 | h1, h2, h3, h4, h5, h6 { 49 | text-align: center; 50 | color: rgb(12, 139, 186); 51 | line-height: 1; 52 | font-weight: 600; 53 | font-family: "Minion Pro","Chaparral Pro",Georgia,serif; 54 | } 55 | 56 | h1 { 57 | font-size: 2em; 58 | } 59 | 60 | h2 { 61 | font-size: 1.6em; 62 | } 63 | 64 | h3 { 65 | font-size: 1.4em; 66 | } 67 | 68 | h4 { 69 | font-size: 1.2em; 70 | } 71 | 72 | h5 { 73 | font-size: 1.1em; 74 | } 75 | 76 | h6 { 77 | font-style: italic; 78 | font-size: 1em; 79 | } 80 | 81 | ol { 82 | margin-left: -15px; 83 | margin-right: 25px; 84 | } 85 | 86 | ul { 87 | margin-left: -15px; 88 | margin-right: 25px; 89 | 90 | li { 91 | list-style: none; 92 | 93 | &:before { 94 | content: '\2010'; 95 | display: block; 96 | position: relative; 97 | max-width: 0; 98 | max-height: 0; 99 | left: -.8em; 100 | top: -.1em; 101 | color: rgb(12, 139, 186); 102 | font-size: 1.2em; 103 | } 104 | } 105 | } 106 | 107 | li { 108 | font-size: .9em; 109 | 110 | p { 111 | -webkit-margin-before: 0; 112 | -webkit-margin-after: 0; 113 | } 114 | } 115 | 116 | .footnote { 117 | font-size: 50%; 118 | vertical-align: super; 119 | } 120 | 121 | div.footnotes { 122 | font-size: 80%; 123 | } 124 | 125 | pre, code { 126 | white-space: pre-wrap; 127 | } 128 | 129 | blockquote { 130 | background: rgb(230, 230, 230); 131 | display: block; 132 | font-style: italic; 133 | font-weight: 200; 134 | color: rgb(12, 139, 186); 135 | padding: 0.2em 2em 0.2em 2em; 136 | -webkit-margin-before: 1em; 137 | -webkit-margin-after: 1em; 138 | -webkit-margin-start: 0; 139 | -webkit-margin-end: 0; 140 | } 141 | 142 | code { 143 | font-family: Inconsolata,"Courier Prime",mono; 144 | font-size: 80%; 145 | padding: 2px; 146 | color: rgb(20, 126, 73); 147 | background: rgb(224, 232, 228); 148 | } 149 | -------------------------------------------------------------------------------- /generate_examples/images/add-to-marked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /generate_examples/images/add-to-marked-hover.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test_markup.md: -------------------------------------------------------------------------------- 1 | # Welcome to Tomorrow 2 | 3 | Advice from all day The Mouse dear she knelt down in surprise. for yourself to try to leave **off** writing down looking anxiously to meet the sand with oh such a waistcoat-pocket [or judge by his housemaid she exclaimed in](http://dummy.com) a steam-engine when he would die. Sentence first idea was written up my mind what *this* young lady to move. Are they lay sprawling about half the Fish-Footman began. Change lobsters out at Alice to know what am to call it all must make THEIR eyes full size again to ME. 4 | 5 | ## Tell Me My Mind and Sighing In 6 | 7 | We quarrelled last more They were too but after a good advice though still and Derision. Ten hours to grow smaller and birds with respect. Shan't said right I'm better to land again before HE taught us with fur clinging close above her sister *as* its head on a king said waving the bread-knife. Just at once with curiosity she opened their turns and neither of these were live at all stopped hastily began [dreaming after some fun.](http://dummy.com) 8 | 9 | 10 | ### Tell Me My Mind and Sighing In 11 | 12 | #### Tell Me My Mind and Sighing In 13 | 14 | ##### Tell Me My Mind and Sighing In 15 | 16 | ###### Tell me my mind and sighing in 17 | 18 | The game's going through the top of Rome no arches. She drew a **great** dismay [*and* curiouser. I'll be afraid said What](http://dummy.com) trial.[^fn1] 19 | 20 | [^fn1]: down one old Father William and skurried away comfortably enough. 21 | 22 | * song 23 | * swallow 24 | * behind 25 | * alarm 26 | * beautify 27 | 28 | 29 | they draw treacle out a dear. Be off this New Zealand or [the mushroom said it sad and](http://dummy.com) turning purple. Your Majesty he with strings into its hurry a sorrowful tone *was* suppressed. Somebody said So you haven't found it. IT. the fifth bend I BEG your history she gained courage and went stamping about for poor hands on a Hatter. Keep back again as **serpents.** 30 | 31 | ![dummy][img1] 32 | 33 | [img1]: http://placekitten.com/400/300 34 | 35 | ## Anything You Ever Thought It Every Door About This 36 | 37 | 38 | Nerds love tables. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 39 | 40 | |wearily.|sighed|||| 41 | |:-----:|:-----:|:-----:|:-----:|:-----:| 42 | breathe|I|SAID|he|that| 43 | shan't.|_I_|||| 44 | myself|you|you|know|him| 45 | beauti|Beautiful|this|into|that| 46 | they|before|heard|having|for| 47 | 48 | 49 | Soup of WHAT. Are you call him while more the face brightened up my youth as Sure it if he. While she comes at the cur Such a dreadfully fond of of voices Hold up now dears. Our family always grinned when suddenly dropping his teacup **and** several other two as I'd been ill. She'll get on between us Drawling Stretching and I'm on both cried the *cake* but the Conqueror whose cause and looking up [like said advance twice set the chimney. ](http://dummy.com) 50 | 51 | > Pray how late much indeed Tis the pleasure of the royal children. 52 | > Herald read in search of having found the subject. 53 | 54 | 55 | 1. treacle 56 | 1. close 57 | 1. Master cleanse. 58 | 2. Pour-over chillwave chia,. 59 | 3. Quinoa swag mixtape typewriter,. 60 | 4. And so on. 61 | 1. teeth 62 | 1. teases 63 | 1. driest 64 | 65 | 66 | They're putting down here and conquest. Pat what's more happened [and one crazy. Some of saying *Thank* you](http://dummy.com) Though they arrived **with** tears. Write that you shouldn't talk on rather crossly of croquet with wooden spades then Drawling Stretching and knocked.[^fn2] 67 | 68 | [^fn2]: so kind Alice again using the trouble you thinking there are the cupboards and hurried upstairs in to it 69 | 70 | 71 | --- 72 | 73 | Collar that part about once without a child 74 | but why it made Alice or 75 | Run home thought poor speaker said Get 76 | up eagerly and one repeat TIS THE BOOTS either. 77 | As a new pair of Mercia and sometimes shorter. 78 | won't stand on yawning. 79 | So he said without being alive the Lory 80 | positively refused to sea of 81 | 82 | 83 | First because I DON'T know all in them called lessons and lonely andCheshire cats nasty low and 84 | : muttered the pig-baby was only look about cats eat one only too began with all played 85 | 86 | Silence. 87 | : cried. 88 | 89 | Some of thing I've fallen by 90 | : Here Bill. 91 | 92 | We can go no 93 | : Heads below and her lap of saying lessons and bread-and butter you needn't be treated with sobs of mushroom 94 | 95 | Said the sand with large 96 | : Serpent I needn't try the guests to grin thought and had hurt and don't want YOURS I wonder 97 | 98 | Fetch me the dance. 99 | : Chorus again in custody by far down upon a moment I hardly enough yet Oh tis love that will talk 100 | 101 | ```ruby 102 | def wonderland(alice) 103 | puts "Cheshire Cat #{smile}" 104 | end 105 | ``` 106 | -------------------------------------------------------------------------------- /generate_examples/preview_template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Marked 2 - Smarter tools for smarter writers 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
    49 |
    50 |

    Home | Documentation | Support | Style Gallery | Twitter

    51 |
    52 |

    Marked 2

    53 |
    54 |
    55 | 56 |
    57 | 58 |
    59 |

    Marked Custom Styles

    60 | 61 |

    A collection of custom styles available for Marked 2. Have your own and want to share? Use the Custom Style Uploader to submit for review.

    62 | 63 |

    If you're browsing on a Mac with Marked 2 installed, you can click the Install button on any style to instantly add it to Marked. If you'd rather install manually, just use the CSS link to save the style to disk, then use the Custom Styles section of the Preferences->Style pane to add it.

    64 | 65 |

    To view all source files, including the default styles, visit the GitHub repository.

    66 | 67 |
      68 | %%previews%% 69 |
    70 |
    71 | 72 | 73 | 74 | 105 | 106 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /styles/Academic.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2019 Brett Terpstra 3 | Content is property of the document author 4 | Please leave this notice in place, along with any additional credits below. 5 | --------------------------------------------------------------- 6 | Title: Academic 7 | Author: Brett Terpstra 8 | Description: Courier, Double-spaced, paragraph indent. Use `###### #` to create "#" centered dividers 9 | */ 10 | 11 | body { 12 | -webkit-font-smoothing: antialiased; 13 | font: normal 1em/2em "Times New Roman", courier, monospace; 14 | margin: 4em 1in 1in 4em; 15 | width: auto; } 16 | 17 | html > body { 18 | font-size: 14px; 19 | text-align: left; } 20 | 21 | #wrapper img { 22 | max-width: 100%; 23 | height: auto; } 24 | #wrapper p { 25 | margin: 0; 26 | text-indent: 1.5em; 27 | page-break-inside: auto; } 28 | #wrapper ul, #wrapper ol { 29 | list-style-position: inside; 30 | padding: 0; 31 | margin: 0; } 32 | #wrapper ul ul, #wrapper ul ol, #wrapper ol ul, #wrapper ol ol { 33 | padding-left: 0; margin-left: 2ch; } 34 | #wrapper ul { 35 | list-style-type: none; } 36 | #wrapper ul > li:before { 37 | content: '* '; } 38 | #wrapper ul li > p:first-child { 39 | margin: 0; } 40 | #wrapper ul li p { 41 | display: inline; } 42 | #wrapper ul ul, #wrapper ul ol { 43 | margin-bottom: 0; } 44 | #wrapper ol { 45 | list-style-type: decimal; 46 | margin-left: 0; } 47 | #wrapper ol ul, #wrapper ol ol { 48 | margin-bottom: 0; } 49 | 50 | h1, h2, h3, h4, h5, h6 { 51 | margin: 1em 0; 52 | font-size: 1em; 53 | font-weight: bold; 54 | } 55 | 56 | h1 { 57 | text-align: center; } 58 | 59 | h2 { 60 | text-align: left; 61 | } 62 | 63 | hr { 64 | border: none; 65 | margin-top: 3em; } 66 | 67 | body, p, td, div { 68 | color: #111111; 69 | word-wrap: break-word; } 70 | 71 | h1, h2, h3, h4, h5, h6 { 72 | color: #111111; 73 | line-height: 1.5em; 74 | font-weight: 700; } 75 | 76 | a { 77 | color: #3c779c; 78 | text-decoration: none; 79 | -webkit-transition: color 0.2s ease-in-out; 80 | -moz-transition: color 0.2s ease-in-out; 81 | -o-transition: color 0.2s ease-in-out; 82 | -ms-transition: color 0.2s ease-in-out; 83 | transition: color 0.2s ease-in-out; } 84 | a:hover { 85 | color: #3593d9; } 86 | 87 | strong { 88 | font-weight: bold; 89 | } 90 | 91 | em { 92 | font-style: italic; 93 | } 94 | 95 | strong em, em strong { 96 | font-weight: 700; 97 | font-style: italic; } 98 | 99 | .footnote { 100 | color: #3c779c; 101 | font-size: 1em; 102 | vertical-align: super; } 103 | 104 | dd { 105 | margin-bottom: 0; } 106 | 107 | caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr { 108 | border-spacing: 0; } 109 | 110 | table { 111 | border: 1px solid rgba(0, 0, 0, 0.25); 112 | border-collapse: collapse; 113 | display: table; 114 | empty-cells: hide; 115 | margin: -1px 0 1em; 116 | padding: 0; 117 | table-layout: fixed; } 118 | 119 | caption { 120 | display: table-caption; 121 | } 122 | 123 | col { 124 | display: table-column; } 125 | 126 | colgroup { 127 | display: table-column-group; } 128 | 129 | tbody { 130 | display: table-row-group; } 131 | 132 | tfoot { 133 | display: table-footer-group; } 134 | 135 | thead { 136 | display: table-header-group; } 137 | 138 | td, th { 139 | display: table-cell; } 140 | 141 | tr { 142 | display: table-row; } 143 | 144 | table th, table td { 145 | padding: 0 1em; } 146 | 147 | table thead { 148 | background: rgba(0, 0, 0, 0.15); 149 | border: 1px solid rgba(0, 0, 0, 0.15); 150 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 151 | 152 | table tbody { 153 | background: rgba(0, 0, 0, 0.05); } 154 | 155 | table tfoot { 156 | background: rgba(0, 0, 0, 0.15); 157 | border: 1px solid rgba(0, 0, 0, 0.15); 158 | border-top: 1px solid rgba(0, 0, 0, 0.2); } 159 | 160 | figure { 161 | display: inline-block; 162 | position: relative; 163 | margin: 1em 0 1em; } 164 | 165 | figcaption { 166 | font-style: italic; 167 | text-align: center; 168 | background: white; 169 | color: #666666; 170 | position: absolute; 171 | left: 0; 172 | bottom: -24px; 173 | width: 98%; 174 | padding: 1%; 175 | -webkit-transition: all 0.2s ease-in-out; 176 | -moz-transition: all 0.2s ease-in-out; 177 | -o-transition: all 0.2s ease-in-out; 178 | -ms-transition: all 0.2s ease-in-out; 179 | transition: all 0.2s ease-in-out; } 180 | 181 | figure:hover > figcaption { 182 | /* background: rgba(0,0,0,1) */ } 183 | 184 | .poetry pre { 185 | display: block; 186 | font-style: italic; 187 | margin-left: 1em; } 188 | .poetry pre code { 189 | word-break: break-all; 190 | word-break: break-word; 191 | /* Non standard for webkit */ 192 | -webkit-hyphens: auto; 193 | -moz-hyphens: auto; 194 | hyphens: auto; 195 | white-space: pre-wrap; } 196 | 197 | blockquote { 198 | text-indent: 0; 199 | padding-left: 1em; 200 | } 201 | 202 | #wrapper blockquote p { 203 | text-indent: 0; 204 | } 205 | 206 | sup, sub, a.footnote { 207 | font-size: 1em; 208 | height: 0; 209 | line-height: 1; 210 | position: relative; 211 | vertical-align: super; } 212 | 213 | sub { 214 | vertical-align: sub; 215 | top: -1px; } 216 | 217 | p, h5 { 218 | margin: 0; } 219 | 220 | dt, th { 221 | font-weight: bold; 222 | } 223 | 224 | table tr:nth-child(odd), table th:nth-child(odd), table td:nth-child(odd) { 225 | background: rgba(255, 255, 255, 0.06); } 226 | 227 | table tr:nth-child(even), table td:nth-child(even) { 228 | background: rgba(200, 200, 200, 0.25); } 229 | 230 | @media print { 231 | body { 232 | overflow: auto; } 233 | 234 | img, pre, blockquote, table, figure, p { 235 | page-break-inside: auto; } 236 | 237 | #wrapper { 238 | background: transparent; 239 | color: #000; 240 | position: relative; } } 241 | @media screen { 242 | .inverted { 243 | background: #252a2a; } 244 | .inverted #wrapper { 245 | background: #252a2a; 246 | color: #eeeeee; } 247 | .inverted hr { 248 | border-color: #333f40 !important; } 249 | .inverted p, .inverted td, .inverted li, .inverted h1, .inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6, .inverted th, .inverted .math, .inverted caption, .inverted dt, .inverted dd { 250 | color: #eeeeee; } 251 | .inverted table { 252 | background: none; } 253 | .inverted table tr:nth-child(odd), .inverted table td:nth-child(odd) { 254 | background: none; } 255 | .inverted a { 256 | color: #acd1d5; } 257 | 258 | ::selection { 259 | background: rgba(157, 193, 200, 0.5); } } -------------------------------------------------------------------------------- /Academic.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2019 Brett Terpstra 3 | Content is property of the document author 4 | Please leave this notice in place, along with any additional credits below. 5 | --------------------------------------------------------------- 6 | Title: Academic 7 | Author: Brett Terpstra 8 | Description: Courier, Double-spaced, paragraph indent. Use `###### #` to create "#" centered dividers 9 | */ 10 | 11 | body { 12 | -webkit-font-smoothing: antialiased; 13 | font: normal 1em/2em "Times New Roman", courier, monospace; 14 | margin: 4em 1in 1in 4em; 15 | width: auto; } 16 | 17 | html > body { 18 | font-size: 14px; 19 | text-align: left; } 20 | 21 | #wrapper img { 22 | max-width: 100%; 23 | height: auto; } 24 | #wrapper p { 25 | margin: 0; 26 | text-indent: 1.5em; 27 | page-break-inside: auto; } 28 | #wrapper ul, #wrapper ol { 29 | list-style-position: inside; 30 | padding: 0; 31 | margin: 0; } 32 | #wrapper ul ul, #wrapper ul ol, #wrapper ol ul, #wrapper ol ol { 33 | padding-left: 0; margin-left: 2ch; } 34 | #wrapper ul { 35 | list-style-type: none; } 36 | #wrapper ul > li:before { 37 | content: '* '; } 38 | #wrapper ul li > p:first-child { 39 | margin: 0; } 40 | #wrapper ul li p { 41 | display: inline; } 42 | #wrapper ul ul, #wrapper ul ol { 43 | margin-bottom: 0; } 44 | #wrapper ol { 45 | list-style-type: decimal; 46 | margin-left: 0; } 47 | #wrapper ol ul, #wrapper ol ol { 48 | margin-bottom: 0; } 49 | 50 | h1, h2, h3, h4, h5, h6 { 51 | margin: 1em 0; 52 | font-size: 1em; 53 | font-weight: bold; 54 | } 55 | 56 | h1 { 57 | text-align: center; } 58 | 59 | h2 { 60 | text-align: left; 61 | } 62 | 63 | hr { 64 | border: none; 65 | margin-top: 3em; } 66 | 67 | body, p, td, div { 68 | color: #111111; 69 | word-wrap: break-word; } 70 | 71 | h1, h2, h3, h4, h5, h6 { 72 | color: #111111; 73 | line-height: 1.5em; 74 | font-weight: 700; } 75 | 76 | a { 77 | color: #3c779c; 78 | text-decoration: none; 79 | -webkit-transition: color 0.2s ease-in-out; 80 | -moz-transition: color 0.2s ease-in-out; 81 | -o-transition: color 0.2s ease-in-out; 82 | -ms-transition: color 0.2s ease-in-out; 83 | transition: color 0.2s ease-in-out; } 84 | a:hover { 85 | color: #3593d9; } 86 | 87 | strong { 88 | font-weight: bold; 89 | } 90 | 91 | em { 92 | font-style: italic; 93 | } 94 | 95 | strong em, em strong { 96 | font-weight: 700; 97 | font-style: italic; } 98 | 99 | .footnote { 100 | color: #3c779c; 101 | font-size: 1em; 102 | vertical-align: super; } 103 | 104 | dd { 105 | margin-bottom: 0; } 106 | 107 | caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr { 108 | border-spacing: 0; } 109 | 110 | table { 111 | border: 1px solid rgba(0, 0, 0, 0.25); 112 | border-collapse: collapse; 113 | display: table; 114 | empty-cells: hide; 115 | margin: -1px 0 1em; 116 | padding: 0; 117 | table-layout: fixed; } 118 | 119 | caption { 120 | display: table-caption; 121 | } 122 | 123 | col { 124 | display: table-column; } 125 | 126 | colgroup { 127 | display: table-column-group; } 128 | 129 | tbody { 130 | display: table-row-group; } 131 | 132 | tfoot { 133 | display: table-footer-group; } 134 | 135 | thead { 136 | display: table-header-group; } 137 | 138 | td, th { 139 | display: table-cell; } 140 | 141 | tr { 142 | display: table-row; } 143 | 144 | table th, table td { 145 | padding: 0 1em; } 146 | 147 | table thead { 148 | background: rgba(0, 0, 0, 0.15); 149 | border: 1px solid rgba(0, 0, 0, 0.15); 150 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 151 | 152 | table tbody { 153 | background: rgba(0, 0, 0, 0.05); } 154 | 155 | table tfoot { 156 | background: rgba(0, 0, 0, 0.15); 157 | border: 1px solid rgba(0, 0, 0, 0.15); 158 | border-top: 1px solid rgba(0, 0, 0, 0.2); } 159 | 160 | figure { 161 | display: inline-block; 162 | position: relative; 163 | margin: 1em 0 1em; } 164 | 165 | figcaption { 166 | font-style: italic; 167 | text-align: center; 168 | background: white; 169 | color: #666666; 170 | position: absolute; 171 | left: 0; 172 | bottom: -24px; 173 | width: 98%; 174 | padding: 1%; 175 | -webkit-transition: all 0.2s ease-in-out; 176 | -moz-transition: all 0.2s ease-in-out; 177 | -o-transition: all 0.2s ease-in-out; 178 | -ms-transition: all 0.2s ease-in-out; 179 | transition: all 0.2s ease-in-out; } 180 | 181 | figure:hover > figcaption { 182 | /* background: rgba(0,0,0,1) */ } 183 | 184 | .poetry pre { 185 | display: block; 186 | font-style: italic; 187 | margin-left: 1em; } 188 | .poetry pre code { 189 | word-break: break-all; 190 | word-break: break-word; 191 | /* Non standard for webkit */ 192 | -webkit-hyphens: auto; 193 | -moz-hyphens: auto; 194 | hyphens: auto; 195 | white-space: pre-wrap; } 196 | 197 | blockquote { 198 | text-indent: 0; 199 | padding-left: 1em; 200 | } 201 | 202 | #wrapper blockquote p { 203 | text-indent: 0; 204 | } 205 | 206 | sup, sub, a.footnote { 207 | font-size: 1em; 208 | height: 0; 209 | line-height: 1; 210 | position: relative; 211 | vertical-align: super; } 212 | 213 | sub { 214 | vertical-align: sub; 215 | top: -1px; } 216 | 217 | p, h5 { 218 | margin: 0; } 219 | 220 | dt, th { 221 | font-weight: bold; 222 | } 223 | 224 | table tr:nth-child(odd), table th:nth-child(odd), table td:nth-child(odd) { 225 | background: rgba(255, 255, 255, 0.06); } 226 | 227 | table tr:nth-child(even), table td:nth-child(even) { 228 | background: rgba(200, 200, 200, 0.25); } 229 | 230 | @media print { 231 | body { 232 | overflow: auto; } 233 | 234 | img, pre, blockquote, table, figure, p { 235 | page-break-inside: auto; } 236 | 237 | #wrapper { 238 | background: transparent; 239 | color: #000; 240 | position: relative; } } 241 | @media screen { 242 | .inverted { 243 | background: #252a2a; } 244 | .inverted #wrapper { 245 | background: #252a2a; 246 | color: #eeeeee; } 247 | .inverted hr { 248 | border-color: #333f40 !important; } 249 | .inverted p, .inverted td, .inverted li, .inverted h1, .inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6, .inverted th, .inverted .math, .inverted caption, .inverted dt, .inverted dd { 250 | color: #eeeeee; } 251 | .inverted table { 252 | background: none; } 253 | .inverted table tr:nth-child(odd), .inverted table td:nth-child(odd) { 254 | background: none; } 255 | .inverted a { 256 | color: #acd1d5; } 257 | 258 | ::selection { 259 | background: rgba(157, 193, 200, 0.5); } } 260 | 261 | -------------------------------------------------------------------------------- /generate_examples/styles/Academic.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2019 Brett Terpstra 3 | Content is property of the document author 4 | Please leave this notice in place, along with any additional credits below. 5 | --------------------------------------------------------------- 6 | Title: Academic 7 | Author: Brett Terpstra 8 | Description: Courier, Double-spaced, paragraph indent. Use `###### #` to create "#" centered dividers 9 | */ 10 | 11 | body { 12 | -webkit-font-smoothing: antialiased; 13 | font: normal 1em/2em "Times New Roman", courier, monospace; 14 | margin: 4em 1in 1in 4em; 15 | width: auto; } 16 | 17 | html > body { 18 | font-size: 14px; 19 | text-align: left; } 20 | 21 | #wrapper img { 22 | max-width: 100%; 23 | height: auto; } 24 | #wrapper p { 25 | margin: 0; 26 | text-indent: 1.5em; 27 | page-break-inside: auto; } 28 | #wrapper ul, #wrapper ol { 29 | list-style-position: inside; 30 | padding: 0; 31 | margin: 0; } 32 | #wrapper ul ul, #wrapper ul ol, #wrapper ol ul, #wrapper ol ol { 33 | padding-left: 0; margin-left: 2ch; } 34 | #wrapper ul { 35 | list-style-type: none; } 36 | #wrapper ul > li:before { 37 | content: '* '; } 38 | #wrapper ul li > p:first-child { 39 | margin: 0; } 40 | #wrapper ul li p { 41 | display: inline; } 42 | #wrapper ul ul, #wrapper ul ol { 43 | margin-bottom: 0; } 44 | #wrapper ol { 45 | list-style-type: decimal; 46 | margin-left: 0; } 47 | #wrapper ol ul, #wrapper ol ol { 48 | margin-bottom: 0; } 49 | 50 | h1, h2, h3, h4, h5, h6 { 51 | margin: 1em 0; 52 | font-size: 1em; 53 | font-weight: bold; 54 | } 55 | 56 | h1 { 57 | text-align: center; } 58 | 59 | h2 { 60 | text-align: left; 61 | } 62 | 63 | hr { 64 | border: none; 65 | margin-top: 3em; } 66 | 67 | body, p, td, div { 68 | color: #111111; 69 | word-wrap: break-word; } 70 | 71 | h1, h2, h3, h4, h5, h6 { 72 | color: #111111; 73 | line-height: 1.5em; 74 | font-weight: 700; } 75 | 76 | a { 77 | color: #3c779c; 78 | text-decoration: none; 79 | -webkit-transition: color 0.2s ease-in-out; 80 | -moz-transition: color 0.2s ease-in-out; 81 | -o-transition: color 0.2s ease-in-out; 82 | -ms-transition: color 0.2s ease-in-out; 83 | transition: color 0.2s ease-in-out; } 84 | a:hover { 85 | color: #3593d9; } 86 | 87 | strong { 88 | font-weight: bold; 89 | } 90 | 91 | em { 92 | font-style: italic; 93 | } 94 | 95 | strong em, em strong { 96 | font-weight: 700; 97 | font-style: italic; } 98 | 99 | .footnote { 100 | color: #3c779c; 101 | font-size: 1em; 102 | vertical-align: super; } 103 | 104 | dd { 105 | margin-bottom: 0; } 106 | 107 | caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr { 108 | border-spacing: 0; } 109 | 110 | table { 111 | border: 1px solid rgba(0, 0, 0, 0.25); 112 | border-collapse: collapse; 113 | display: table; 114 | empty-cells: hide; 115 | margin: -1px 0 1em; 116 | padding: 0; 117 | table-layout: fixed; } 118 | 119 | caption { 120 | display: table-caption; 121 | } 122 | 123 | col { 124 | display: table-column; } 125 | 126 | colgroup { 127 | display: table-column-group; } 128 | 129 | tbody { 130 | display: table-row-group; } 131 | 132 | tfoot { 133 | display: table-footer-group; } 134 | 135 | thead { 136 | display: table-header-group; } 137 | 138 | td, th { 139 | display: table-cell; } 140 | 141 | tr { 142 | display: table-row; } 143 | 144 | table th, table td { 145 | padding: 0 1em; } 146 | 147 | table thead { 148 | background: rgba(0, 0, 0, 0.15); 149 | border: 1px solid rgba(0, 0, 0, 0.15); 150 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 151 | 152 | table tbody { 153 | background: rgba(0, 0, 0, 0.05); } 154 | 155 | table tfoot { 156 | background: rgba(0, 0, 0, 0.15); 157 | border: 1px solid rgba(0, 0, 0, 0.15); 158 | border-top: 1px solid rgba(0, 0, 0, 0.2); } 159 | 160 | figure { 161 | display: inline-block; 162 | position: relative; 163 | margin: 1em 0 1em; } 164 | 165 | figcaption { 166 | font-style: italic; 167 | text-align: center; 168 | background: white; 169 | color: #666666; 170 | position: absolute; 171 | left: 0; 172 | bottom: -24px; 173 | width: 98%; 174 | padding: 1%; 175 | -webkit-transition: all 0.2s ease-in-out; 176 | -moz-transition: all 0.2s ease-in-out; 177 | -o-transition: all 0.2s ease-in-out; 178 | -ms-transition: all 0.2s ease-in-out; 179 | transition: all 0.2s ease-in-out; } 180 | 181 | figure:hover > figcaption { 182 | /* background: rgba(0,0,0,1) */ } 183 | 184 | .poetry pre { 185 | display: block; 186 | font-style: italic; 187 | margin-left: 1em; } 188 | .poetry pre code { 189 | word-break: break-all; 190 | word-break: break-word; 191 | /* Non standard for webkit */ 192 | -webkit-hyphens: auto; 193 | -moz-hyphens: auto; 194 | hyphens: auto; 195 | white-space: pre-wrap; } 196 | 197 | blockquote { 198 | text-indent: 0; 199 | padding-left: 1em; 200 | } 201 | 202 | #wrapper blockquote p { 203 | text-indent: 0; 204 | } 205 | 206 | sup, sub, a.footnote { 207 | font-size: 1em; 208 | height: 0; 209 | line-height: 1; 210 | position: relative; 211 | vertical-align: super; } 212 | 213 | sub { 214 | vertical-align: sub; 215 | top: -1px; } 216 | 217 | p, h5 { 218 | margin: 0; } 219 | 220 | dt, th { 221 | font-weight: bold; 222 | } 223 | 224 | table tr:nth-child(odd), table th:nth-child(odd), table td:nth-child(odd) { 225 | background: rgba(255, 255, 255, 0.06); } 226 | 227 | table tr:nth-child(even), table td:nth-child(even) { 228 | background: rgba(200, 200, 200, 0.25); } 229 | 230 | @media print { 231 | body { 232 | overflow: auto; } 233 | 234 | img, pre, blockquote, table, figure, p { 235 | page-break-inside: auto; } 236 | 237 | #wrapper { 238 | background: transparent; 239 | color: #000; 240 | position: relative; } } 241 | @media screen { 242 | .inverted { 243 | background: #252a2a; } 244 | .inverted #wrapper { 245 | background: #252a2a; 246 | color: #eeeeee; } 247 | .inverted hr { 248 | border-color: #333f40 !important; } 249 | .inverted p, .inverted td, .inverted li, .inverted h1, .inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6, .inverted th, .inverted .math, .inverted caption, .inverted dt, .inverted dd { 250 | color: #eeeeee; } 251 | .inverted table { 252 | background: none; } 253 | .inverted table tr:nth-child(odd), .inverted table td:nth-child(odd) { 254 | background: none; } 255 | .inverted a { 256 | color: #acd1d5; } 257 | 258 | ::selection { 259 | background: rgba(157, 193, 200, 0.5); } } 260 | 261 | -------------------------------------------------------------------------------- /Highlighter.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2011 Brett Terpstra 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Highlighter 6 | Author: Gordon Brander http://gordonbrander.com 7 | Description: Minimal theme with careful typographic scale and highlighed bold. 8 | */ 9 | /* http://retinart.net/typography/typographicscale/ */ 10 | html { 11 | background: #fff; 12 | color: #444; 13 | font: 16px/1.5 "Fira Sans OT", "Helvetica Neue", sans-serif; 14 | } 15 | 16 | h1, h2, h3, h4, h5, h6 { 17 | font-weight: normal; 18 | margin-top: 36px; 19 | margin-bottom: 18px; 20 | } 21 | 22 | h1 { 23 | font-size: 32px; 24 | line-height: 36px; 25 | } 26 | 27 | h2 { 28 | border-bottom: 3px solid #ddd; 29 | font-size: 24px; 30 | line-height: 30px; 31 | margin-bottom: 24px; 32 | padding-bottom: 6px; 33 | } 34 | 35 | h3 { 36 | font-size: 21px; 37 | line-height: 30px; 38 | } 39 | 40 | h4 { 41 | color: #777; 42 | font-size: 18px; 43 | line-height: 24px; 44 | } 45 | 46 | h5, h6 { 47 | color: #888; 48 | font-size: 14px; 49 | line-height: 24px; 50 | text-transform: uppercase; 51 | } 52 | 53 | hr { 54 | background: #ddd; 55 | border: 0; 56 | height: 3px; 57 | margin: 36px 0; 58 | } 59 | 60 | a { 61 | color: blue; 62 | text-decoration: none; 63 | } 64 | 65 | a:hover { 66 | color: #3593d9; 67 | } 68 | 69 | .footnote { 70 | color: #0d6ea1; 71 | font-size: .8em; 72 | vertical-align: super; 73 | } 74 | 75 | img { 76 | max-width: 100%; 77 | height: auto; 78 | } 79 | 80 | p, 81 | table, 82 | blockquote, 83 | dl, 84 | ul, 85 | ol { 86 | margin-bottom: 18px; 87 | margin-top: 0; 88 | } 89 | 90 | li ul, 91 | li ol { 92 | margin-bottom: 6px; 93 | } 94 | 95 | b, 96 | strong { 97 | background: #ffff60; 98 | border-radius: 4px; 99 | font-weight: 500; 100 | color: #000; 101 | } 102 | 103 | caption,col,colgroup,table,tbody,td,tfoot,th,thead,tr { 104 | border-spacing: 0; 105 | } 106 | 107 | table { 108 | border: 1px solid rgba(0,0,0,0.25); 109 | border-collapse: collapse; 110 | display: table; 111 | empty-cells: hide; 112 | padding: 0; 113 | table-layout: fixed; 114 | } 115 | 116 | caption { 117 | display: table-caption; 118 | font-weight: 700; 119 | } 120 | 121 | col { 122 | display: table-column; 123 | } 124 | 125 | colgroup { 126 | display: table-column-group; 127 | } 128 | 129 | tbody { 130 | display: table-row-group; 131 | } 132 | 133 | tfoot { 134 | display: table-footer-group; 135 | } 136 | 137 | thead { 138 | display: table-header-group; 139 | } 140 | 141 | td,th { 142 | display: table-cell; 143 | } 144 | 145 | tr { 146 | display: table-row; 147 | } 148 | 149 | table th,table td { 150 | font-size: 1.1em; 151 | line-height: 23px; 152 | padding: 0 1em; 153 | } 154 | 155 | table thead { 156 | background: rgba(0,0,0,0.15); 157 | border: 1px solid rgba(0,0,0,0.15); 158 | border-bottom: 1px solid rgba(0,0,0,0.2); 159 | } 160 | 161 | table tbody { 162 | background: rgba(0,0,0,0.05); 163 | } 164 | 165 | table tfoot { 166 | background: rgba(0,0,0,0.15); 167 | border: 1px solid rgba(0,0,0,0.15); 168 | border-top: 1px solid rgba(0,0,0,0.2); 169 | } 170 | 171 | figure { 172 | display: inline-block; 173 | position: relative; 174 | margin: 1em 0 2em; 175 | } 176 | 177 | figcaption { 178 | font-style: italic; 179 | text-align: center; 180 | background: white; 181 | color: #666; 182 | position: absolute; 183 | left: 0; 184 | bottom: -24px; 185 | width: 98%; 186 | padding: 1%; 187 | -webkit-transition: all .2s ease-in-out; 188 | -moz-transition: all .2s ease-in-out; 189 | -o-transition: all .2s ease-in-out; 190 | -ms-transition: all .2s ease-in-out; 191 | transition: all .2s ease-in-out; 192 | } 193 | 194 | .poetry pre { 195 | display: block; 196 | font-family: Georgia, Garamond, serif; 197 | font-style: italic; 198 | } 199 | 200 | blockquote { 201 | color: #666; 202 | margin: 0 18px 18px; 203 | } 204 | 205 | sup, sub, a.footnote { 206 | font-size: 1.4ex; 207 | height: 0; 208 | line-height: 1; 209 | position: relative; 210 | vertical-align: super; 211 | } 212 | 213 | sub { 214 | vertical-align: sub; 215 | top: -1px; 216 | } 217 | 218 | dt,th { 219 | font-weight: 700; 220 | } 221 | 222 | table tr:nth-child(odd),table th:nth-child(odd),table td:nth-child(odd) { 223 | background: rgba(255,255,255,0.06); 224 | } 225 | 226 | table tr:nth-child(even),table td:nth-child(even) { 227 | background: rgba(200,200,200,0.25); 228 | } 229 | 230 | @media print { 231 | body { 232 | overflow: auto; 233 | } 234 | 235 | img,pre,blockquote,table,figure,p { 236 | page-break-inside: avoid; 237 | } 238 | 239 | #wrapper { 240 | background: #fff; 241 | color: #303030; 242 | } 243 | } 244 | 245 | @media screen { 246 | .inverted #wrapper,.inverted { 247 | background: rgba(37, 42, 42, 1); 248 | } 249 | 250 | .inverted hr { 251 | border-color: rgba(51, 63, 64, 1) !important; 252 | } 253 | 254 | .inverted p,.inverted td,.inverted li,.inverted h1,.inverted h2,.inverted h3,.inverted h4,.inverted h5,.inverted h6,.inverted pre,.inverted code,.inverted th,.inverted .math,.inverted caption,.inverted dd,.inverted dt { 255 | color: #eee !important; 256 | } 257 | 258 | .inverted table tr:nth-child(odd),.inverted table th:nth-child(odd),.inverted table td:nth-child(odd) { 259 | background: none; 260 | } 261 | 262 | .inverted a { 263 | color: rgba(172, 209, 213, 1); 264 | } 265 | 266 | #wrapper { 267 | padding: 20px; 268 | } 269 | 270 | ::selection { 271 | background: rgba(157, 193, 200,.5); 272 | } 273 | 274 | h1::selection { 275 | background-color: rgba(45, 156, 208, .3); 276 | } 277 | 278 | h2::selection { 279 | background-color: rgba(90, 182, 224, .3); 280 | } 281 | 282 | h3::selection,h4::selection,h5::selection,h6::selection,li::selection,ol::selection { 283 | background-color: rgba(133, 201, 232, .3); 284 | } 285 | 286 | code::selection { 287 | background-color: rgba(0,0,0,.7); 288 | color: #eee; 289 | } 290 | 291 | code span::selection { 292 | background-color: rgba(0,0,0,.7) !important; 293 | color: #eee !important; 294 | } 295 | 296 | a::selection { 297 | background-color: rgba(255, 230, 102,.2); 298 | } 299 | 300 | .inverted a::selection { 301 | background-color: rgba(255, 230, 102,.6); 302 | } 303 | 304 | td::selection,th::selection,caption::selection { 305 | background-color: rgba(180, 237, 95, .5); 306 | } 307 | } 308 | -------------------------------------------------------------------------------- /generate_examples/styles/Highlighter.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2011 Brett Terpstra 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Highlighter 6 | Author: Gordon Brander http://gordonbrander.com 7 | Description: Minimal theme with careful typographic scale and highlighed bold. 8 | */ 9 | /* http://retinart.net/typography/typographicscale/ */ 10 | html { 11 | background: #fff; 12 | color: #444; 13 | font: 16px/1.5 "Fira Sans OT", "Helvetica Neue", sans-serif; 14 | } 15 | 16 | h1, h2, h3, h4, h5, h6 { 17 | font-weight: normal; 18 | margin-top: 36px; 19 | margin-bottom: 18px; 20 | } 21 | 22 | h1 { 23 | font-size: 32px; 24 | line-height: 36px; 25 | } 26 | 27 | h2 { 28 | border-bottom: 3px solid #ddd; 29 | font-size: 24px; 30 | line-height: 30px; 31 | margin-bottom: 24px; 32 | padding-bottom: 6px; 33 | } 34 | 35 | h3 { 36 | font-size: 21px; 37 | line-height: 30px; 38 | } 39 | 40 | h4 { 41 | color: #777; 42 | font-size: 18px; 43 | line-height: 24px; 44 | } 45 | 46 | h5, h6 { 47 | color: #888; 48 | font-size: 14px; 49 | line-height: 24px; 50 | text-transform: uppercase; 51 | } 52 | 53 | hr { 54 | background: #ddd; 55 | border: 0; 56 | height: 3px; 57 | margin: 36px 0; 58 | } 59 | 60 | a { 61 | color: blue; 62 | text-decoration: none; 63 | } 64 | 65 | a:hover { 66 | color: #3593d9; 67 | } 68 | 69 | .footnote { 70 | color: #0d6ea1; 71 | font-size: .8em; 72 | vertical-align: super; 73 | } 74 | 75 | img { 76 | max-width: 100%; 77 | height: auto; 78 | } 79 | 80 | p, 81 | table, 82 | blockquote, 83 | dl, 84 | ul, 85 | ol { 86 | margin-bottom: 18px; 87 | margin-top: 0; 88 | } 89 | 90 | li ul, 91 | li ol { 92 | margin-bottom: 6px; 93 | } 94 | 95 | b, 96 | strong { 97 | background: #ffff60; 98 | border-radius: 4px; 99 | font-weight: 500; 100 | color: #000; 101 | } 102 | 103 | caption,col,colgroup,table,tbody,td,tfoot,th,thead,tr { 104 | border-spacing: 0; 105 | } 106 | 107 | table { 108 | border: 1px solid rgba(0,0,0,0.25); 109 | border-collapse: collapse; 110 | display: table; 111 | empty-cells: hide; 112 | padding: 0; 113 | table-layout: fixed; 114 | } 115 | 116 | caption { 117 | display: table-caption; 118 | font-weight: 700; 119 | } 120 | 121 | col { 122 | display: table-column; 123 | } 124 | 125 | colgroup { 126 | display: table-column-group; 127 | } 128 | 129 | tbody { 130 | display: table-row-group; 131 | } 132 | 133 | tfoot { 134 | display: table-footer-group; 135 | } 136 | 137 | thead { 138 | display: table-header-group; 139 | } 140 | 141 | td,th { 142 | display: table-cell; 143 | } 144 | 145 | tr { 146 | display: table-row; 147 | } 148 | 149 | table th,table td { 150 | font-size: 1.1em; 151 | line-height: 23px; 152 | padding: 0 1em; 153 | } 154 | 155 | table thead { 156 | background: rgba(0,0,0,0.15); 157 | border: 1px solid rgba(0,0,0,0.15); 158 | border-bottom: 1px solid rgba(0,0,0,0.2); 159 | } 160 | 161 | table tbody { 162 | background: rgba(0,0,0,0.05); 163 | } 164 | 165 | table tfoot { 166 | background: rgba(0,0,0,0.15); 167 | border: 1px solid rgba(0,0,0,0.15); 168 | border-top: 1px solid rgba(0,0,0,0.2); 169 | } 170 | 171 | figure { 172 | display: inline-block; 173 | position: relative; 174 | margin: 1em 0 2em; 175 | } 176 | 177 | figcaption { 178 | font-style: italic; 179 | text-align: center; 180 | background: white; 181 | color: #666; 182 | position: absolute; 183 | left: 0; 184 | bottom: -24px; 185 | width: 98%; 186 | padding: 1%; 187 | -webkit-transition: all .2s ease-in-out; 188 | -moz-transition: all .2s ease-in-out; 189 | -o-transition: all .2s ease-in-out; 190 | -ms-transition: all .2s ease-in-out; 191 | transition: all .2s ease-in-out; 192 | } 193 | 194 | .poetry pre { 195 | display: block; 196 | font-family: Georgia, Garamond, serif; 197 | font-style: italic; 198 | } 199 | 200 | blockquote { 201 | color: #666; 202 | margin: 0 18px 18px; 203 | } 204 | 205 | sup, sub, a.footnote { 206 | font-size: 1.4ex; 207 | height: 0; 208 | line-height: 1; 209 | position: relative; 210 | vertical-align: super; 211 | } 212 | 213 | sub { 214 | vertical-align: sub; 215 | top: -1px; 216 | } 217 | 218 | dt,th { 219 | font-weight: 700; 220 | } 221 | 222 | table tr:nth-child(odd),table th:nth-child(odd),table td:nth-child(odd) { 223 | background: rgba(255,255,255,0.06); 224 | } 225 | 226 | table tr:nth-child(even),table td:nth-child(even) { 227 | background: rgba(200,200,200,0.25); 228 | } 229 | 230 | @media print { 231 | body { 232 | overflow: auto; 233 | } 234 | 235 | img,pre,blockquote,table,figure,p { 236 | page-break-inside: avoid; 237 | } 238 | 239 | #wrapper { 240 | background: #fff; 241 | color: #303030; 242 | } 243 | } 244 | 245 | @media screen { 246 | .inverted #wrapper,.inverted { 247 | background: rgba(37, 42, 42, 1); 248 | } 249 | 250 | .inverted hr { 251 | border-color: rgba(51, 63, 64, 1) !important; 252 | } 253 | 254 | .inverted p,.inverted td,.inverted li,.inverted h1,.inverted h2,.inverted h3,.inverted h4,.inverted h5,.inverted h6,.inverted pre,.inverted code,.inverted th,.inverted .math,.inverted caption,.inverted dd,.inverted dt { 255 | color: #eee !important; 256 | } 257 | 258 | .inverted table tr:nth-child(odd),.inverted table th:nth-child(odd),.inverted table td:nth-child(odd) { 259 | background: none; 260 | } 261 | 262 | .inverted a { 263 | color: rgba(172, 209, 213, 1); 264 | } 265 | 266 | #wrapper { 267 | padding: 20px; 268 | } 269 | 270 | ::selection { 271 | background: rgba(157, 193, 200,.5); 272 | } 273 | 274 | h1::selection { 275 | background-color: rgba(45, 156, 208, .3); 276 | } 277 | 278 | h2::selection { 279 | background-color: rgba(90, 182, 224, .3); 280 | } 281 | 282 | h3::selection,h4::selection,h5::selection,h6::selection,li::selection,ol::selection { 283 | background-color: rgba(133, 201, 232, .3); 284 | } 285 | 286 | code::selection { 287 | background-color: rgba(0,0,0,.7); 288 | color: #eee; 289 | } 290 | 291 | code span::selection { 292 | background-color: rgba(0,0,0,.7) !important; 293 | color: #eee !important; 294 | } 295 | 296 | a::selection { 297 | background-color: rgba(255, 230, 102,.2); 298 | } 299 | 300 | .inverted a::selection { 301 | background-color: rgba(255, 230, 102,.6); 302 | } 303 | 304 | td::selection,th::selection,caption::selection { 305 | background-color: rgba(180, 237, 95, .5); 306 | } 307 | } 308 | -------------------------------------------------------------------------------- /Palatino Memo.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2011 Brett Terpstra 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Palatino Memo 6 | Author: Chase Nordengren, http://semicolons.net 7 | Description: A layout for a basic memo or other printed document, using the font Palatino Linotype. 8 | */ 9 | 10 | body { 11 | -webkit-font-smoothing: antialiased; 12 | font: normal 1em "Palatino Linotype",serif; 13 | margin: 0; 14 | } 15 | 16 | html>body { 17 | font-size: 11px; 18 | } 19 | 20 | li { 21 | font-size: 100%; 22 | } 23 | 24 | li li { 25 | font-size: 100%; 26 | } 27 | 28 | li p { 29 | font-size: 100%; 30 | } 31 | 32 | h1 { 33 | color: #000; 34 | font-size: 1em; 35 | text-align: center; 36 | } 37 | 38 | h2 { 39 | color: #111; 40 | font-size: 1em; 41 | } 42 | 43 | h3,h4,h5,h6 { 44 | color: #111; 45 | font-size: 1em; 46 | font-weight: normal; 47 | font-style: italic; 48 | } 49 | 50 | p { 51 | text-indent: 25px; 52 | line-height: 22px; 53 | } 54 | 55 | body,p,td,div { 56 | color: #111; 57 | font-family: "Palatino Linotype", serif; 58 | word-wrap: break-word; 59 | } 60 | 61 | 62 | a { 63 | -webkit-transition: color .2s ease-in-out; 64 | -moz-transition: color .2s ease-in-out; 65 | -o-transition: color .2s ease-in-out; 66 | -ms-transition: color .2s ease-in-out; 67 | transition: color .2s ease-in-out; 68 | color: #0d6ea1; 69 | text-decoration: none; 70 | } 71 | 72 | a:hover { 73 | color: #3593d9; 74 | } 75 | 76 | .footnote { 77 | color: #0d6ea1; 78 | font-size: .8em; 79 | vertical-align: super; 80 | } 81 | 82 | #wrapper img { 83 | max-width: 100%; 84 | height: auto; 85 | } 86 | 87 | dd { 88 | margin-bottom: 1em; 89 | } 90 | 91 | li > p:first-child { 92 | margin: 0; 93 | } 94 | 95 | caption,col,colgroup,table,tbody,td,tfoot,th,thead,tr { 96 | border-spacing: 0; 97 | } 98 | 99 | table { 100 | border: 1px solid rgba(0,0,0,0.25); 101 | border-collapse: collapse; 102 | display: table; 103 | empty-cells: hide; 104 | margin: 0px 0 23px; 105 | padding: 0; 106 | table-layout: fixed; 107 | } 108 | 109 | caption { 110 | display: table-caption; 111 | font-weight: 700; 112 | } 113 | 114 | col { 115 | display: table-column; 116 | } 117 | 118 | colgroup { 119 | display: table-column-group; 120 | } 121 | 122 | tbody { 123 | display: table-row-group; 124 | } 125 | 126 | tfoot { 127 | display: table-footer-group; 128 | } 129 | 130 | thead { 131 | display: table-header-group; 132 | } 133 | 134 | td,th { 135 | display: table-cell; 136 | } 137 | 138 | tr { 139 | display: table-row; 140 | } 141 | 142 | table th,table td { 143 | font-size: 1em; 144 | line-height: 1.5em; 145 | padding: 0 1em; 146 | } 147 | 148 | table thead { 149 | background: rgba(0,0,0,0.15); 150 | border: 1px solid rgba(0,0,0,0.15); 151 | border-bottom: 1px solid rgba(0,0,0,0.2); 152 | } 153 | 154 | table tbody { 155 | background: rgba(0,0,0,0.05); 156 | } 157 | 158 | table tfoot { 159 | background: rgba(0,0,0,0.15); 160 | border: 1px solid rgba(0,0,0,0.15); 161 | border-top: 1px solid rgba(0,0,0,0.2); 162 | } 163 | 164 | figure { 165 | display: inline-block; 166 | position: relative; 167 | margin: 1em 0 2em; 168 | } 169 | 170 | figcaption { 171 | font-style: italic; 172 | text-align: center; 173 | background: white; 174 | color: #666; 175 | position: absolute; 176 | left: 0; 177 | bottom: -24px; 178 | width: 98%; 179 | padding: 1%; 180 | -webkit-transition: all .2s ease-in-out; 181 | -moz-transition: all .2s ease-in-out; 182 | -o-transition: all .2s ease-in-out; 183 | -ms-transition: all .2s ease-in-out; 184 | transition: all .2s ease-in-out; 185 | } 186 | 187 | figure:hover>figcaption { 188 | /* background: rgba(0,0,0,1) */ 189 | } 190 | 191 | .poetry pre { 192 | display: block; 193 | font-family: Georgia, Garamond, serif !important; 194 | font-size: 110% !important; 195 | font-style: italic; 196 | line-height: 1.6em; 197 | margin-left: 1em; 198 | } 199 | 200 | .poetry pre code { 201 | font-family: Georgia, Garamond, serif !important; 202 | } 203 | 204 | blockquote p { 205 | font-size: 1em; 206 | text-indent: 0px; 207 | line-height: 1em; 208 | } 209 | 210 | sup,sub,a.footnote { 211 | font-size: 1em; 212 | height: 0; 213 | line-height: 1; 214 | position: relative; 215 | vertical-align: super; 216 | } 217 | 218 | sub { 219 | vertical-align: sub; 220 | top: -1px; 221 | } 222 | 223 | table tr:nth-child(odd),table th:nth-child(odd),table td:nth-child(odd) { 224 | background: rgba(255,255,255,0.06); 225 | } 226 | 227 | table tr:nth-child(even),table td:nth-child(even) { 228 | background: rgba(200,200,200,0.25); 229 | } 230 | 231 | @media print { 232 | p { 233 | text-indent: 25px; 234 | line-height: 22px; 235 | } 236 | body { 237 | overflow: auto; 238 | font-size: 11px; 239 | } 240 | 241 | img,pre,blockquote,table,figure { 242 | page-break-inside: avoid; 243 | } 244 | 245 | #wrapper { 246 | background: #fff; 247 | color: #303030; 248 | font-size: 11px; 249 | position: absolute; 250 | left: 10px; 251 | top: 0px; 252 | text-indent: 0; 253 | } 254 | } 255 | 256 | @media screen { 257 | .inverted #wrapper,.inverted { 258 | background: rgba(37, 42, 42, 1); 259 | } 260 | 261 | .inverted hr { 262 | border-color: rgba(51, 63, 64, 1) !important; 263 | } 264 | 265 | .inverted p,.inverted td,.inverted li,.inverted h1,.inverted h2,.inverted h3,.inverted h4,.inverted h5,.inverted h6,.inverted pre,.inverted code,.inverted th,.inverted .math,.inverted caption,.inverted dd,.inverted dt { 266 | color: #eee !important; 267 | } 268 | 269 | .inverted table tr:nth-child(odd),.inverted table th:nth-child(odd),.inverted table td:nth-child(odd) { 270 | background: none; 271 | } 272 | 273 | .inverted a { 274 | color: rgba(172, 209, 213, 1); 275 | } 276 | 277 | #wrapper { 278 | padding: 20px; 279 | } 280 | 281 | ::selection { 282 | background: rgba(157, 193, 200,.5); 283 | } 284 | 285 | h1::selection { 286 | background-color: rgba(45, 156, 208, .3); 287 | } 288 | 289 | h2::selection { 290 | background-color: rgba(90, 182, 224, .3); 291 | } 292 | 293 | h3::selection,h4::selection,h5::selection,h6::selection,li::selection,ol::selection { 294 | background-color: rgba(133, 201, 232, .3); 295 | } 296 | 297 | code::selection { 298 | background-color: rgba(0,0,0,.7); 299 | color: #eee; 300 | } 301 | 302 | code span::selection { 303 | background-color: rgba(0,0,0,.7) !important; 304 | color: #eee !important; 305 | } 306 | 307 | a::selection { 308 | background-color: rgba(255, 230, 102,.2); 309 | } 310 | 311 | .inverted a::selection { 312 | background-color: rgba(255, 230, 102,.6); 313 | } 314 | 315 | td::selection,th::selection,caption::selection { 316 | background-color: rgba(180, 237, 95, .5); 317 | } 318 | } 319 | -------------------------------------------------------------------------------- /generate_examples/styles/Palatino Memo.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2011 Brett Terpstra 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Palatino Memo 6 | Author: Chase Nordengren, http://semicolons.net 7 | Description: A layout for a basic memo or other printed document, using the font Palatino Linotype. 8 | */ 9 | 10 | body { 11 | -webkit-font-smoothing: antialiased; 12 | font: normal 1em "Palatino Linotype",serif; 13 | margin: 0; 14 | } 15 | 16 | html>body { 17 | font-size: 11px; 18 | } 19 | 20 | li { 21 | font-size: 100%; 22 | } 23 | 24 | li li { 25 | font-size: 100%; 26 | } 27 | 28 | li p { 29 | font-size: 100%; 30 | } 31 | 32 | h1 { 33 | color: #000; 34 | font-size: 1em; 35 | text-align: center; 36 | } 37 | 38 | h2 { 39 | color: #111; 40 | font-size: 1em; 41 | } 42 | 43 | h3,h4,h5,h6 { 44 | color: #111; 45 | font-size: 1em; 46 | font-weight: normal; 47 | font-style: italic; 48 | } 49 | 50 | p { 51 | text-indent: 25px; 52 | line-height: 22px; 53 | } 54 | 55 | body,p,td,div { 56 | color: #111; 57 | font-family: "Palatino Linotype", serif; 58 | word-wrap: break-word; 59 | } 60 | 61 | 62 | a { 63 | -webkit-transition: color .2s ease-in-out; 64 | -moz-transition: color .2s ease-in-out; 65 | -o-transition: color .2s ease-in-out; 66 | -ms-transition: color .2s ease-in-out; 67 | transition: color .2s ease-in-out; 68 | color: #0d6ea1; 69 | text-decoration: none; 70 | } 71 | 72 | a:hover { 73 | color: #3593d9; 74 | } 75 | 76 | .footnote { 77 | color: #0d6ea1; 78 | font-size: .8em; 79 | vertical-align: super; 80 | } 81 | 82 | #wrapper img { 83 | max-width: 100%; 84 | height: auto; 85 | } 86 | 87 | dd { 88 | margin-bottom: 1em; 89 | } 90 | 91 | li > p:first-child { 92 | margin: 0; 93 | } 94 | 95 | caption,col,colgroup,table,tbody,td,tfoot,th,thead,tr { 96 | border-spacing: 0; 97 | } 98 | 99 | table { 100 | border: 1px solid rgba(0,0,0,0.25); 101 | border-collapse: collapse; 102 | display: table; 103 | empty-cells: hide; 104 | margin: 0px 0 23px; 105 | padding: 0; 106 | table-layout: fixed; 107 | } 108 | 109 | caption { 110 | display: table-caption; 111 | font-weight: 700; 112 | } 113 | 114 | col { 115 | display: table-column; 116 | } 117 | 118 | colgroup { 119 | display: table-column-group; 120 | } 121 | 122 | tbody { 123 | display: table-row-group; 124 | } 125 | 126 | tfoot { 127 | display: table-footer-group; 128 | } 129 | 130 | thead { 131 | display: table-header-group; 132 | } 133 | 134 | td,th { 135 | display: table-cell; 136 | } 137 | 138 | tr { 139 | display: table-row; 140 | } 141 | 142 | table th,table td { 143 | font-size: 1em; 144 | line-height: 1.5em; 145 | padding: 0 1em; 146 | } 147 | 148 | table thead { 149 | background: rgba(0,0,0,0.15); 150 | border: 1px solid rgba(0,0,0,0.15); 151 | border-bottom: 1px solid rgba(0,0,0,0.2); 152 | } 153 | 154 | table tbody { 155 | background: rgba(0,0,0,0.05); 156 | } 157 | 158 | table tfoot { 159 | background: rgba(0,0,0,0.15); 160 | border: 1px solid rgba(0,0,0,0.15); 161 | border-top: 1px solid rgba(0,0,0,0.2); 162 | } 163 | 164 | figure { 165 | display: inline-block; 166 | position: relative; 167 | margin: 1em 0 2em; 168 | } 169 | 170 | figcaption { 171 | font-style: italic; 172 | text-align: center; 173 | background: white; 174 | color: #666; 175 | position: absolute; 176 | left: 0; 177 | bottom: -24px; 178 | width: 98%; 179 | padding: 1%; 180 | -webkit-transition: all .2s ease-in-out; 181 | -moz-transition: all .2s ease-in-out; 182 | -o-transition: all .2s ease-in-out; 183 | -ms-transition: all .2s ease-in-out; 184 | transition: all .2s ease-in-out; 185 | } 186 | 187 | figure:hover>figcaption { 188 | /* background: rgba(0,0,0,1) */ 189 | } 190 | 191 | .poetry pre { 192 | display: block; 193 | font-family: Georgia, Garamond, serif !important; 194 | font-size: 110% !important; 195 | font-style: italic; 196 | line-height: 1.6em; 197 | margin-left: 1em; 198 | } 199 | 200 | .poetry pre code { 201 | font-family: Georgia, Garamond, serif !important; 202 | } 203 | 204 | blockquote p { 205 | font-size: 1em; 206 | text-indent: 0px; 207 | line-height: 1em; 208 | } 209 | 210 | sup,sub,a.footnote { 211 | font-size: 1em; 212 | height: 0; 213 | line-height: 1; 214 | position: relative; 215 | vertical-align: super; 216 | } 217 | 218 | sub { 219 | vertical-align: sub; 220 | top: -1px; 221 | } 222 | 223 | table tr:nth-child(odd),table th:nth-child(odd),table td:nth-child(odd) { 224 | background: rgba(255,255,255,0.06); 225 | } 226 | 227 | table tr:nth-child(even),table td:nth-child(even) { 228 | background: rgba(200,200,200,0.25); 229 | } 230 | 231 | @media print { 232 | p { 233 | text-indent: 25px; 234 | line-height: 22px; 235 | } 236 | body { 237 | overflow: auto; 238 | font-size: 11px; 239 | } 240 | 241 | img,pre,blockquote,table,figure { 242 | page-break-inside: avoid; 243 | } 244 | 245 | #wrapper { 246 | background: #fff; 247 | color: #303030; 248 | font-size: 11px; 249 | position: absolute; 250 | left: 10px; 251 | top: 0px; 252 | text-indent: 0; 253 | } 254 | } 255 | 256 | @media screen { 257 | .inverted #wrapper,.inverted { 258 | background: rgba(37, 42, 42, 1); 259 | } 260 | 261 | .inverted hr { 262 | border-color: rgba(51, 63, 64, 1) !important; 263 | } 264 | 265 | .inverted p,.inverted td,.inverted li,.inverted h1,.inverted h2,.inverted h3,.inverted h4,.inverted h5,.inverted h6,.inverted pre,.inverted code,.inverted th,.inverted .math,.inverted caption,.inverted dd,.inverted dt { 266 | color: #eee !important; 267 | } 268 | 269 | .inverted table tr:nth-child(odd),.inverted table th:nth-child(odd),.inverted table td:nth-child(odd) { 270 | background: none; 271 | } 272 | 273 | .inverted a { 274 | color: rgba(172, 209, 213, 1); 275 | } 276 | 277 | #wrapper { 278 | padding: 20px; 279 | } 280 | 281 | ::selection { 282 | background: rgba(157, 193, 200,.5); 283 | } 284 | 285 | h1::selection { 286 | background-color: rgba(45, 156, 208, .3); 287 | } 288 | 289 | h2::selection { 290 | background-color: rgba(90, 182, 224, .3); 291 | } 292 | 293 | h3::selection,h4::selection,h5::selection,h6::selection,li::selection,ol::selection { 294 | background-color: rgba(133, 201, 232, .3); 295 | } 296 | 297 | code::selection { 298 | background-color: rgba(0,0,0,.7); 299 | color: #eee; 300 | } 301 | 302 | code span::selection { 303 | background-color: rgba(0,0,0,.7) !important; 304 | color: #eee !important; 305 | } 306 | 307 | a::selection { 308 | background-color: rgba(255, 230, 102,.2); 309 | } 310 | 311 | .inverted a::selection { 312 | background-color: rgba(255, 230, 102,.6); 313 | } 314 | 315 | td::selection,th::selection,caption::selection { 316 | background-color: rgba(180, 237, 95, .5); 317 | } 318 | } 319 | -------------------------------------------------------------------------------- /generate_examples/styles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

    Marked Custom Styles

    10 | 11 |

    A collection of custom styles available for Marked 2. Have your own and want to share? Contact the super-friendly Marked developer, Brett Terpstra.

    12 | 13 | 38 | 39 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /styles/Custom Example.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2011 Brett Terpstra 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Theme title 6 | Author: Your name and optional url 7 | Description: Basic description of the theme. 8 | */ 9 | body { 10 | -webkit-font-smoothing: antialiased; 11 | font: normal .8764em/1.5em Arial,Verdana,sans-serif; 12 | margin: 0; 13 | } 14 | 15 | html>body { 16 | font-size: 13px; 17 | } 18 | 19 | li { 20 | font-size: 110%; 21 | } 22 | 23 | li li { 24 | font-size: 100%; 25 | } 26 | 27 | li p { 28 | font-size: 100%; 29 | margin: .5em 0; 30 | } 31 | 32 | h1 { 33 | color: #000; 34 | font-size: 2.2857em; 35 | line-height: .6563em; 36 | margin: .6563em 0; 37 | } 38 | 39 | h2 { 40 | color: #111; 41 | font-size: 1.7143em; 42 | line-height: .875em; 43 | margin: .875em 0; 44 | } 45 | 46 | h3 { 47 | color: #111; 48 | font-size: 1.5em; 49 | line-height: 1em; 50 | margin: 1em 0; 51 | } 52 | 53 | h4 { 54 | color: #111; 55 | font-size: 1.2857em; 56 | line-height: 1.1667em; 57 | margin: 1.1667em 0; 58 | } 59 | 60 | h5 { 61 | color: #111; 62 | font-size: 1.15em; 63 | line-height: 1.3em; 64 | margin: 1.3em 0; 65 | } 66 | 67 | h6 { 68 | font-size: 1em; 69 | line-height: 1.5em; 70 | margin: 1.5em 0; 71 | } 72 | 73 | body,p,td,div { 74 | color: #111; 75 | font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; 76 | word-wrap: break-word; 77 | } 78 | 79 | h1,h2,h3,h4,h5,h6 { 80 | line-height: 1.5em; 81 | } 82 | 83 | a { 84 | -webkit-transition: color .2s ease-in-out; 85 | -moz-transition: color .2s ease-in-out; 86 | -o-transition: color .2s ease-in-out; 87 | -ms-transition: color .2s ease-in-out; 88 | transition: color .2s ease-in-out; 89 | color: #0d6ea1; 90 | text-decoration: none; 91 | } 92 | 93 | a:hover { 94 | color: #3593d9; 95 | } 96 | 97 | .footnote { 98 | color: #0d6ea1; 99 | font-size: .8em; 100 | vertical-align: super; 101 | } 102 | 103 | #wrapper img { 104 | max-width: 100%; 105 | height: auto; 106 | } 107 | 108 | dd { 109 | margin-bottom: 1em; 110 | } 111 | 112 | li > p:first-child { 113 | margin: 0; 114 | } 115 | 116 | ul ul,ul ol { 117 | margin-bottom: .4em; 118 | } 119 | 120 | caption,col,colgroup,table,tbody,td,tfoot,th,thead,tr { 121 | border-spacing: 0; 122 | } 123 | 124 | table { 125 | border: 1px solid rgba(0,0,0,0.25); 126 | border-collapse: collapse; 127 | display: table; 128 | empty-cells: hide; 129 | margin: -1px 0 23px; 130 | padding: 0; 131 | table-layout: fixed; 132 | } 133 | 134 | caption { 135 | display: table-caption; 136 | font-weight: 700; 137 | } 138 | 139 | col { 140 | display: table-column; 141 | } 142 | 143 | colgroup { 144 | display: table-column-group; 145 | } 146 | 147 | tbody { 148 | display: table-row-group; 149 | } 150 | 151 | tfoot { 152 | display: table-footer-group; 153 | } 154 | 155 | thead { 156 | display: table-header-group; 157 | } 158 | 159 | td,th { 160 | display: table-cell; 161 | } 162 | 163 | tr { 164 | display: table-row; 165 | } 166 | 167 | table th,table td { 168 | font-size: 1.1em; 169 | line-height: 23px; 170 | padding: 0 1em; 171 | } 172 | 173 | table thead { 174 | background: rgba(0,0,0,0.15); 175 | border: 1px solid rgba(0,0,0,0.15); 176 | border-bottom: 1px solid rgba(0,0,0,0.2); 177 | } 178 | 179 | table tbody { 180 | background: rgba(0,0,0,0.05); 181 | } 182 | 183 | table tfoot { 184 | background: rgba(0,0,0,0.15); 185 | border: 1px solid rgba(0,0,0,0.15); 186 | border-top: 1px solid rgba(0,0,0,0.2); 187 | } 188 | 189 | figure { 190 | display: inline-block; 191 | position: relative; 192 | margin: 1em 0 2em; 193 | } 194 | 195 | figcaption { 196 | font-style: italic; 197 | text-align: center; 198 | background: white; 199 | color: #666; 200 | position: absolute; 201 | left: 0; 202 | bottom: -24px; 203 | width: 98%; 204 | padding: 1%; 205 | -webkit-transition: all .2s ease-in-out; 206 | -moz-transition: all .2s ease-in-out; 207 | -o-transition: all .2s ease-in-out; 208 | -ms-transition: all .2s ease-in-out; 209 | transition: all .2s ease-in-out; 210 | } 211 | 212 | figure:hover>figcaption { 213 | /* background: rgba(0,0,0,1) */ 214 | } 215 | 216 | .poetry pre { 217 | display: block; 218 | font-family: Georgia, Garamond, serif !important; 219 | font-size: 110% !important; 220 | font-style: italic; 221 | line-height: 1.6em; 222 | margin-left: 1em; 223 | } 224 | 225 | .poetry pre code { 226 | font-family: Georgia, Garamond, serif !important; 227 | } 228 | 229 | blockquote p { 230 | font-size: 110%; 231 | font-style: italic; 232 | line-height: 1.6em; 233 | } 234 | 235 | sup,sub,a.footnote { 236 | font-size: 1.4ex; 237 | height: 0; 238 | line-height: 1; 239 | position: relative; 240 | vertical-align: super; 241 | } 242 | 243 | sub { 244 | vertical-align: sub; 245 | top: -1px; 246 | } 247 | 248 | p,h5 { 249 | font-size: 1.1429em; 250 | line-height: 1.3125em; 251 | margin: 1.3125em 0; 252 | } 253 | 254 | dt,th { 255 | font-weight: 700; 256 | } 257 | 258 | table tr:nth-child(odd),table th:nth-child(odd),table td:nth-child(odd) { 259 | background: rgba(255,255,255,0.06); 260 | } 261 | 262 | table tr:nth-child(even),table td:nth-child(even) { 263 | background: rgba(200,200,200,0.25); 264 | } 265 | 266 | @media print { 267 | body { 268 | overflow: auto; 269 | } 270 | 271 | img,pre,blockquote,table,figure,p { 272 | page-break-inside: avoid; 273 | } 274 | 275 | #wrapper { 276 | background: #fff; 277 | color: #303030; 278 | font-size: 85%; 279 | padding: 10px; 280 | position: relative; 281 | text-indent: 0; 282 | } 283 | } 284 | 285 | @media screen { 286 | .inverted #wrapper,.inverted { 287 | background: rgba(37, 42, 42, 1); 288 | } 289 | 290 | .inverted hr { 291 | border-color: rgba(51, 63, 64, 1) !important; 292 | } 293 | 294 | .inverted p,.inverted td,.inverted li,.inverted h1,.inverted h2,.inverted h3,.inverted h4,.inverted h5,.inverted h6,.inverted pre,.inverted code,.inverted th,.inverted .math,.inverted caption,.inverted dd,.inverted dt { 295 | color: #eee !important; 296 | } 297 | 298 | .inverted table tr:nth-child(odd),.inverted table th:nth-child(odd),.inverted table td:nth-child(odd) { 299 | background: none; 300 | } 301 | 302 | .inverted a { 303 | color: rgba(172, 209, 213, 1); 304 | } 305 | 306 | #wrapper { 307 | padding: 20px; 308 | } 309 | 310 | ::selection { 311 | background: rgba(157, 193, 200,.5); 312 | } 313 | 314 | h1::selection { 315 | background-color: rgba(45, 156, 208, .3); 316 | } 317 | 318 | h2::selection { 319 | background-color: rgba(90, 182, 224, .3); 320 | } 321 | 322 | h3::selection,h4::selection,h5::selection,h6::selection,li::selection,ol::selection { 323 | background-color: rgba(133, 201, 232, .3); 324 | } 325 | 326 | code::selection { 327 | background-color: rgba(0,0,0,.7); 328 | color: #eee; 329 | } 330 | 331 | code span::selection { 332 | background-color: rgba(0,0,0,.7) !important; 333 | color: #eee !important; 334 | } 335 | 336 | a::selection { 337 | background-color: rgba(255, 230, 102,.2); 338 | } 339 | 340 | .inverted a::selection { 341 | background-color: rgba(255, 230, 102,.6); 342 | } 343 | 344 | td::selection,th::selection,caption::selection { 345 | background-color: rgba(180, 237, 95, .5); 346 | } 347 | } 348 | -------------------------------------------------------------------------------- /Custom.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app 3 | Content is property of the document author 4 | Please leave this notice in place, along with any additional credits below. 5 | --------------------------------------------------------------- 6 | Title: Your style title 7 | Author: Your Name 8 | Description: Description of theme 9 | Non-standard fonts used: (optional) [Rockwell, Rokkit, etc.] 10 | Note: (optional) Additional notes, where to get custom fonts, etc. 11 | --- 12 | */ 13 | 14 | body { 15 | -webkit-font-smoothing: antialiased; 16 | font: normal .8764em/1.5em Arial,Verdana,sans-serif; 17 | margin: 0; 18 | } 19 | 20 | html>body { 21 | font-size: 13px; 22 | } 23 | 24 | li { 25 | font-size: 110%; 26 | } 27 | 28 | li li { 29 | font-size: 100%; 30 | } 31 | 32 | li p { 33 | font-size: 100%; 34 | margin: .5em 0; 35 | } 36 | 37 | h1 { 38 | color: #000; 39 | font-size: 2.2857em; 40 | line-height: .6563em; 41 | margin: .6563em 0; 42 | } 43 | 44 | h2 { 45 | color: #111; 46 | font-size: 1.7143em; 47 | line-height: .875em; 48 | margin: .875em 0; 49 | } 50 | 51 | h3 { 52 | color: #111; 53 | font-size: 1.5em; 54 | line-height: 1em; 55 | margin: 1em 0; 56 | } 57 | 58 | h4 { 59 | color: #111; 60 | font-size: 1.2857em; 61 | line-height: 1.1667em; 62 | margin: 1.1667em 0; 63 | } 64 | 65 | h5 { 66 | color: #111; 67 | font-size: 1.15em; 68 | line-height: 1.3em; 69 | margin: 1.3em 0; 70 | } 71 | 72 | h6 { 73 | font-size: 1em; 74 | line-height: 1.5em; 75 | margin: 1.5em 0; 76 | } 77 | 78 | body,p,td,div { 79 | color: #111; 80 | font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; 81 | word-wrap: break-word; 82 | } 83 | 84 | h1,h2,h3,h4,h5,h6 { 85 | line-height: 1.5em; 86 | } 87 | 88 | a { 89 | -webkit-transition: color .2s ease-in-out; 90 | -moz-transition: color .2s ease-in-out; 91 | -o-transition: color .2s ease-in-out; 92 | -ms-transition: color .2s ease-in-out; 93 | transition: color .2s ease-in-out; 94 | color: #0d6ea1; 95 | text-decoration: none; 96 | } 97 | 98 | a:hover { 99 | color: #3593d9; 100 | } 101 | 102 | .footnote { 103 | color: #0d6ea1; 104 | font-size: .8em; 105 | vertical-align: super; 106 | } 107 | 108 | #wrapper img { 109 | max-width: 100%; 110 | height: auto; 111 | } 112 | 113 | dd { 114 | margin-bottom: 1em; 115 | } 116 | 117 | li > p:first-child { 118 | margin: 0; 119 | } 120 | 121 | ul ul,ul ol { 122 | margin-bottom: .4em; 123 | } 124 | 125 | caption,col,colgroup,table,tbody,td,tfoot,th,thead,tr { 126 | border-spacing: 0; 127 | } 128 | 129 | table { 130 | border: 1px solid rgba(0,0,0,0.25); 131 | border-collapse: collapse; 132 | display: table; 133 | empty-cells: hide; 134 | margin: -1px 0 23px; 135 | padding: 0; 136 | table-layout: fixed; 137 | } 138 | 139 | caption { 140 | display: table-caption; 141 | font-weight: 700; 142 | } 143 | 144 | col { 145 | display: table-column; 146 | } 147 | 148 | colgroup { 149 | display: table-column-group; 150 | } 151 | 152 | tbody { 153 | display: table-row-group; 154 | } 155 | 156 | tfoot { 157 | display: table-footer-group; 158 | } 159 | 160 | thead { 161 | display: table-header-group; 162 | } 163 | 164 | td,th { 165 | display: table-cell; 166 | } 167 | 168 | tr { 169 | display: table-row; 170 | } 171 | 172 | table th,table td { 173 | font-size: 1.1em; 174 | line-height: 23px; 175 | padding: 0 1em; 176 | } 177 | 178 | table thead { 179 | background: rgba(0,0,0,0.15); 180 | border: 1px solid rgba(0,0,0,0.15); 181 | border-bottom: 1px solid rgba(0,0,0,0.2); 182 | } 183 | 184 | table tbody { 185 | background: rgba(0,0,0,0.05); 186 | } 187 | 188 | table tfoot { 189 | background: rgba(0,0,0,0.15); 190 | border: 1px solid rgba(0,0,0,0.15); 191 | border-top: 1px solid rgba(0,0,0,0.2); 192 | } 193 | 194 | figure { 195 | display: inline-block; 196 | position: relative; 197 | margin: 1em 0 2em; 198 | } 199 | 200 | figcaption { 201 | font-style: italic; 202 | text-align: center; 203 | background: white; 204 | color: #666; 205 | position: absolute; 206 | left: 0; 207 | bottom: -24px; 208 | width: 98%; 209 | padding: 1%; 210 | -webkit-transition: all .2s ease-in-out; 211 | -moz-transition: all .2s ease-in-out; 212 | -o-transition: all .2s ease-in-out; 213 | -ms-transition: all .2s ease-in-out; 214 | transition: all .2s ease-in-out; 215 | } 216 | 217 | figure:hover>figcaption { 218 | /* background: rgba(0,0,0,1) */ 219 | } 220 | 221 | .poetry pre { 222 | display: block; 223 | font-family: Georgia, Garamond, serif !important; 224 | font-size: 110% !important; 225 | font-style: italic; 226 | line-height: 1.6em; 227 | margin-left: 1em; 228 | } 229 | 230 | .poetry pre code { 231 | font-family: Georgia, Garamond, serif !important; 232 | } 233 | 234 | blockquote p { 235 | font-size: 110%; 236 | font-style: italic; 237 | line-height: 1.6em; 238 | } 239 | 240 | sup,sub,a.footnote { 241 | font-size: 1.4ex; 242 | height: 0; 243 | line-height: 1; 244 | position: relative; 245 | vertical-align: super; 246 | } 247 | 248 | sub { 249 | vertical-align: sub; 250 | top: -1px; 251 | } 252 | 253 | p,h5 { 254 | font-size: 1.1429em; 255 | line-height: 1.3125em; 256 | margin: 1.3125em 0; 257 | } 258 | 259 | dt,th { 260 | font-weight: 700; 261 | } 262 | 263 | table tr:nth-child(odd),table th:nth-child(odd),table td:nth-child(odd) { 264 | background: rgba(255,255,255,0.06); 265 | } 266 | 267 | table tr:nth-child(even),table td:nth-child(even) { 268 | background: rgba(200,200,200,0.25); 269 | } 270 | 271 | @media print { 272 | body { 273 | overflow: auto; 274 | } 275 | 276 | img,pre,blockquote,table,figure,p { 277 | page-break-inside: avoid; 278 | } 279 | 280 | #wrapper { 281 | background: #fff; 282 | color: #303030; 283 | font-size: 85%; 284 | padding: 10px; 285 | position: relative; 286 | text-indent: 0; 287 | } 288 | } 289 | 290 | @media screen { 291 | .inverted #wrapper,.inverted { 292 | background: rgba(37, 42, 42, 1); 293 | } 294 | 295 | .inverted hr { 296 | border-color: rgba(51, 63, 64, 1) !important; 297 | } 298 | 299 | .inverted p,.inverted td,.inverted li,.inverted h1,.inverted h2,.inverted h3,.inverted h4,.inverted h5,.inverted h6,.inverted pre,.inverted code,.inverted th,.inverted .math,.inverted caption,.inverted dd,.inverted dt { 300 | color: #eee !important; 301 | } 302 | 303 | .inverted table tr:nth-child(odd),.inverted table th:nth-child(odd),.inverted table td:nth-child(odd) { 304 | background: none; 305 | } 306 | 307 | .inverted a { 308 | color: rgba(172, 209, 213, 1); 309 | } 310 | 311 | #wrapper { 312 | padding: 20px; 313 | } 314 | 315 | ::selection { 316 | background: rgba(157, 193, 200,.5); 317 | } 318 | 319 | h1::selection { 320 | background-color: rgba(45, 156, 208, .3); 321 | } 322 | 323 | h2::selection { 324 | background-color: rgba(90, 182, 224, .3); 325 | } 326 | 327 | h3::selection,h4::selection,h5::selection,h6::selection,li::selection,ol::selection { 328 | background-color: rgba(133, 201, 232, .3); 329 | } 330 | 331 | code::selection { 332 | background-color: rgba(0,0,0,.7); 333 | color: #eee; 334 | } 335 | 336 | code span::selection { 337 | background-color: rgba(0,0,0,.7) !important; 338 | color: #eee !important; 339 | } 340 | 341 | a::selection { 342 | background-color: rgba(255, 230, 102,.2); 343 | } 344 | 345 | .inverted a::selection { 346 | background-color: rgba(255, 230, 102,.6); 347 | } 348 | 349 | td::selection,th::selection,caption::selection { 350 | background-color: rgba(180, 237, 95, .5); 351 | } 352 | } 353 | -------------------------------------------------------------------------------- /Swiss Mou.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2019 Brett Terpstra 3 | Content is property of the document author 4 | Please leave this notice in place, along with any additional credits below. 5 | --------------------------------------------------------------- 6 | Title: Swiss Mou 7 | Author: Waldemar Schott , Brett Terpstra 8 | Description: Based on Brett Terpstra's Swiss style included in Marked.app 2.4.11. Inline code style, the single change, is borrowed from Mou.app . 9 | */ 10 | 11 | body { 12 | -webkit-font-smoothing: antialiased; 13 | font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; 14 | margin: 30px 0 0; 15 | padding: 0; 16 | background: #fff; 17 | } 18 | #wrapper { 19 | padding: 20px; 20 | } 21 | li { 22 | font-size: 110%} 23 | li li { 24 | font-size: 100%} 25 | li p { 26 | font-size: 100%; 27 | margin: .5em 0; 28 | } 29 | h1 { 30 | color: #000; 31 | } 32 | h2 { 33 | color: #111; 34 | } 35 | h3 { 36 | color: #111; 37 | margin: 0; 38 | } 39 | h4 { 40 | color: #111; 41 | } 42 | h5 { 43 | color: #111; 44 | } 45 | h6 { 46 | font-size: 1em; 47 | line-height: 1.5em; 48 | margin: 1.5em 0; 49 | } 50 | body, p, td, div { 51 | color: #111; 52 | font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; 53 | word-wrap: break-word; 54 | } 55 | a { 56 | color: #0d6ea1; 57 | text-decoration: none; 58 | -webkit-transition: color 0.2s ease-in-out; 59 | -moz-transition: color 0.2s ease-in-out; 60 | -o-transition: color 0.2s ease-in-out; 61 | -ms-transition: color 0.2s ease-in-out; 62 | transition: color 0.2s ease-in-out; 63 | } 64 | a:hover { 65 | color: #3593d9; 66 | } 67 | body { 68 | font-size: 15px; 69 | line-height: 21px; 70 | margin: 0 auto; 71 | } 72 | h1 { 73 | font-size: 37px; 74 | line-height: 42px; 75 | margin-top: 42px; 76 | margin-bottom: 21px; 77 | } 78 | h2 { 79 | font-size: 27px; 80 | line-height: 42px; 81 | margin-top: 42px; 82 | margin-bottom: 21px; 83 | } 84 | h3 { 85 | font-size: 20px; 86 | line-height: 21px; 87 | margin-top: 21px; 88 | margin-bottom: 21px; 89 | } 90 | h4 { 91 | font-size: 20px; 92 | line-height: 21px; 93 | margin-top: 21px; 94 | margin-bottom: 21px; 95 | } 96 | p, ul, ol, pre, table, blockquote { 97 | margin-top: 21px; 98 | margin-bottom: 21px; 99 | } 100 | hr { 101 | border: 1px solid; 102 | margin: -1px 0; 103 | } 104 | ul ul, ol ol, ul ol, ol ul { 105 | margin-top: 0; 106 | margin-bottom: 0; 107 | } 108 | b, strong, em, small, code { 109 | line-height: 1; 110 | } 111 | .footnote { 112 | color: #0d6ea1; 113 | font-size: .8em; 114 | vertical-align: super; 115 | } 116 | abbr, acronym { 117 | border-bottom: 1px dotted #aaa; 118 | } 119 | #wrapper img { 120 | max-width: 100%; 121 | height: auto; 122 | } 123 | dd { 124 | font-size: 1em; 125 | margin-bottom: 1em; 126 | } 127 | li>p:first-child { 128 | margin: 0; 129 | } 130 | ul ul, ul ol { 131 | margin-bottom: .4em; 132 | } 133 | caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr { 134 | border-spacing: 0; 135 | } 136 | table { 137 | border: 1px solid rgba(0, 0, 0, 0.25); 138 | border-collapse: collapse; 139 | display: table; 140 | empty-cells: hide; 141 | margin: -1px 0 1.3125em; 142 | padding: 0; 143 | table-layout: fixed; 144 | } 145 | caption { 146 | display: table-caption; 147 | font-weight: 700; 148 | } 149 | col { 150 | display: table-column; 151 | } 152 | colgroup { 153 | display: table-column-group; 154 | } 155 | tbody { 156 | display: table-row-group; 157 | } 158 | tfoot { 159 | display: table-footer-group; 160 | } 161 | thead { 162 | display: table-header-group; 163 | } 164 | td, th { 165 | display: table-cell; 166 | } 167 | tr { 168 | display: table-row; 169 | } 170 | table th, table td { 171 | font-size: 1.1em; 172 | line-height: 1.3; 173 | padding: .5em 1em 0; 174 | } 175 | table thead { 176 | background: rgba(0, 0, 0, 0.15); 177 | border: 1px solid rgba(0, 0, 0, 0.15); 178 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); 179 | } 180 | table tbody { 181 | background: rgba(0, 0, 0, 0.05); 182 | } 183 | table tfoot { 184 | background: rgba(0, 0, 0, 0.15); 185 | border: 1px solid rgba(0, 0, 0, 0.15); 186 | border-top: 1px solid rgba(0, 0, 0, 0.2); 187 | } 188 | figure { 189 | display: inline-block; 190 | overflow: hidden; 191 | position: relative; 192 | margin: 1em 0 2em; 193 | } 194 | figcaption { 195 | font-style: italic; 196 | text-align: center; 197 | background: white; 198 | color: #666; 199 | } 200 | .poetry pre { 201 | display: block; 202 | font-family: Georgia, Garamond, serif !important; 203 | font-size: 110% !important; 204 | font-style: italic; 205 | line-height: 1.6em; 206 | margin-left: 1em; 207 | } 208 | .poetry pre code { 209 | font-family: Georgia, Garamond, serif !important; 210 | word-break: break-all; 211 | word-break: break-word; 212 | -webkit-hyphens: auto; 213 | -moz-hyphens: auto; 214 | hyphens: auto; 215 | white-space: pre-wrap; 216 | } 217 | blockquote p { 218 | font-size: 110%; 219 | font-style: italic; 220 | line-height: 1.6em; 221 | } 222 | sup, sub, a.footnote { 223 | font-size: 1.4ex; 224 | height: 0; 225 | line-height: 1; 226 | position: relative; 227 | vertical-align: super; 228 | } 229 | sub { 230 | vertical-align: sub; 231 | top: -1px; 232 | } 233 | p, h5 { 234 | font-size: 1.1429em; 235 | line-height: 1.3125em; 236 | margin: 1.3125em 0; 237 | } 238 | dt, th { 239 | font-weight: 700; 240 | } 241 | table tr:nth-child(odd), table th:nth-child(odd), table td:nth-child(odd) { 242 | background: rgba(255, 255, 255, 0.06); 243 | } 244 | table tr:nth-child(even), table td:nth-child(even) { 245 | background: rgba(200, 200, 200, 0.25); 246 | } 247 | @media print { 248 | img, table, figure { 249 | page-break-inside: avoid; 250 | } 251 | #wrapper { 252 | background: #fff; 253 | color: #303030; 254 | padding: 10px; 255 | position: relative; 256 | text-indent: 0; 257 | } 258 | }@media screen { 259 | .inverted { 260 | background: #252a2a; 261 | } 262 | .inverted #wrapper { 263 | background: #252a2a; 264 | color: #eee; 265 | } 266 | .inverted hr { 267 | border-color: #333f40 !important; 268 | } 269 | .inverted p, .inverted td, .inverted li, .inverted h1, .inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6, .inverted th, .inverted .math, .inverted caption, .inverted dt, .inverted dd { 270 | color: #eee; 271 | } 272 | .inverted pre { 273 | background: #ccc; 274 | } 275 | .inverted pre code { 276 | color: #111; 277 | } 278 | .inverted table { 279 | background: none; 280 | } 281 | .inverted table tr:nth-child(odd), .inverted table td:nth-child(odd) { 282 | background: none; 283 | } 284 | .inverted a { 285 | color: #acd1d5; 286 | } 287 | ::selection { 288 | background: rgba(157, 193, 200, 0.5); 289 | } 290 | h1::selection { 291 | background-color: rgba(45, 156, 208, 0.3); 292 | } 293 | h2::selection { 294 | background-color: rgba(90, 182, 224, 0.3); 295 | } 296 | h3::selection, h4::selection, h5::selection, h6::selection, li::selection, ol::selection { 297 | background-color: rgba(133, 201, 232, 0.3); 298 | } 299 | code::selection { 300 | background-color: rgba(0, 0, 0, 0.7); 301 | color: #eee; 302 | } 303 | code span::selection { 304 | background-color: rgba(0, 0, 0, 0.7) !important; 305 | color: #eee !important; 306 | } 307 | a::selection { 308 | background-color: rgba(255, 230, 102, 0.2); 309 | } 310 | .inverted a::selection { 311 | background-color: rgba(255, 230, 102, 0.6); 312 | } 313 | td::selection, th::selection, caption::selection { 314 | background-color: rgba(180, 237, 95, 0.5); 315 | } 316 | } 317 | 318 | code { 319 | background-color: #fee9cc; 320 | border-radius: 3px; 321 | padding: 1px 3px; 322 | } 323 | -------------------------------------------------------------------------------- /generate_examples/styles/Swiss Mou.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2019 Brett Terpstra 3 | Content is property of the document author 4 | Please leave this notice in place, along with any additional credits below. 5 | --------------------------------------------------------------- 6 | Title: Swiss Mou 7 | Author: Waldemar Schott , Brett Terpstra 8 | Description: Based on Brett Terpstra's Swiss style included in Marked.app 2.4.11. Inline code style, the single change, is borrowed from Mou.app . 9 | */ 10 | 11 | body { 12 | -webkit-font-smoothing: antialiased; 13 | font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; 14 | margin: 30px 0 0; 15 | padding: 0; 16 | background: #fff; 17 | } 18 | #wrapper { 19 | padding: 20px; 20 | } 21 | li { 22 | font-size: 110%} 23 | li li { 24 | font-size: 100%} 25 | li p { 26 | font-size: 100%; 27 | margin: .5em 0; 28 | } 29 | h1 { 30 | color: #000; 31 | } 32 | h2 { 33 | color: #111; 34 | } 35 | h3 { 36 | color: #111; 37 | margin: 0; 38 | } 39 | h4 { 40 | color: #111; 41 | } 42 | h5 { 43 | color: #111; 44 | } 45 | h6 { 46 | font-size: 1em; 47 | line-height: 1.5em; 48 | margin: 1.5em 0; 49 | } 50 | body, p, td, div { 51 | color: #111; 52 | font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; 53 | word-wrap: break-word; 54 | } 55 | a { 56 | color: #0d6ea1; 57 | text-decoration: none; 58 | -webkit-transition: color 0.2s ease-in-out; 59 | -moz-transition: color 0.2s ease-in-out; 60 | -o-transition: color 0.2s ease-in-out; 61 | -ms-transition: color 0.2s ease-in-out; 62 | transition: color 0.2s ease-in-out; 63 | } 64 | a:hover { 65 | color: #3593d9; 66 | } 67 | body { 68 | font-size: 15px; 69 | line-height: 21px; 70 | margin: 0 auto; 71 | } 72 | h1 { 73 | font-size: 37px; 74 | line-height: 42px; 75 | margin-top: 42px; 76 | margin-bottom: 21px; 77 | } 78 | h2 { 79 | font-size: 27px; 80 | line-height: 42px; 81 | margin-top: 42px; 82 | margin-bottom: 21px; 83 | } 84 | h3 { 85 | font-size: 20px; 86 | line-height: 21px; 87 | margin-top: 21px; 88 | margin-bottom: 21px; 89 | } 90 | h4 { 91 | font-size: 20px; 92 | line-height: 21px; 93 | margin-top: 21px; 94 | margin-bottom: 21px; 95 | } 96 | p, ul, ol, pre, table, blockquote { 97 | margin-top: 21px; 98 | margin-bottom: 21px; 99 | } 100 | hr { 101 | border: 1px solid; 102 | margin: -1px 0; 103 | } 104 | ul ul, ol ol, ul ol, ol ul { 105 | margin-top: 0; 106 | margin-bottom: 0; 107 | } 108 | b, strong, em, small, code { 109 | line-height: 1; 110 | } 111 | .footnote { 112 | color: #0d6ea1; 113 | font-size: .8em; 114 | vertical-align: super; 115 | } 116 | abbr, acronym { 117 | border-bottom: 1px dotted #aaa; 118 | } 119 | #wrapper img { 120 | max-width: 100%; 121 | height: auto; 122 | } 123 | dd { 124 | font-size: 1em; 125 | margin-bottom: 1em; 126 | } 127 | li>p:first-child { 128 | margin: 0; 129 | } 130 | ul ul, ul ol { 131 | margin-bottom: .4em; 132 | } 133 | caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr { 134 | border-spacing: 0; 135 | } 136 | table { 137 | border: 1px solid rgba(0, 0, 0, 0.25); 138 | border-collapse: collapse; 139 | display: table; 140 | empty-cells: hide; 141 | margin: -1px 0 1.3125em; 142 | padding: 0; 143 | table-layout: fixed; 144 | } 145 | caption { 146 | display: table-caption; 147 | font-weight: 700; 148 | } 149 | col { 150 | display: table-column; 151 | } 152 | colgroup { 153 | display: table-column-group; 154 | } 155 | tbody { 156 | display: table-row-group; 157 | } 158 | tfoot { 159 | display: table-footer-group; 160 | } 161 | thead { 162 | display: table-header-group; 163 | } 164 | td, th { 165 | display: table-cell; 166 | } 167 | tr { 168 | display: table-row; 169 | } 170 | table th, table td { 171 | font-size: 1.1em; 172 | line-height: 1.3; 173 | padding: .5em 1em 0; 174 | } 175 | table thead { 176 | background: rgba(0, 0, 0, 0.15); 177 | border: 1px solid rgba(0, 0, 0, 0.15); 178 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); 179 | } 180 | table tbody { 181 | background: rgba(0, 0, 0, 0.05); 182 | } 183 | table tfoot { 184 | background: rgba(0, 0, 0, 0.15); 185 | border: 1px solid rgba(0, 0, 0, 0.15); 186 | border-top: 1px solid rgba(0, 0, 0, 0.2); 187 | } 188 | figure { 189 | display: inline-block; 190 | overflow: hidden; 191 | position: relative; 192 | margin: 1em 0 2em; 193 | } 194 | figcaption { 195 | font-style: italic; 196 | text-align: center; 197 | background: white; 198 | color: #666; 199 | } 200 | .poetry pre { 201 | display: block; 202 | font-family: Georgia, Garamond, serif !important; 203 | font-size: 110% !important; 204 | font-style: italic; 205 | line-height: 1.6em; 206 | margin-left: 1em; 207 | } 208 | .poetry pre code { 209 | font-family: Georgia, Garamond, serif !important; 210 | word-break: break-all; 211 | word-break: break-word; 212 | -webkit-hyphens: auto; 213 | -moz-hyphens: auto; 214 | hyphens: auto; 215 | white-space: pre-wrap; 216 | } 217 | blockquote p { 218 | font-size: 110%; 219 | font-style: italic; 220 | line-height: 1.6em; 221 | } 222 | sup, sub, a.footnote { 223 | font-size: 1.4ex; 224 | height: 0; 225 | line-height: 1; 226 | position: relative; 227 | vertical-align: super; 228 | } 229 | sub { 230 | vertical-align: sub; 231 | top: -1px; 232 | } 233 | p, h5 { 234 | font-size: 1.1429em; 235 | line-height: 1.3125em; 236 | margin: 1.3125em 0; 237 | } 238 | dt, th { 239 | font-weight: 700; 240 | } 241 | table tr:nth-child(odd), table th:nth-child(odd), table td:nth-child(odd) { 242 | background: rgba(255, 255, 255, 0.06); 243 | } 244 | table tr:nth-child(even), table td:nth-child(even) { 245 | background: rgba(200, 200, 200, 0.25); 246 | } 247 | @media print { 248 | img, table, figure { 249 | page-break-inside: avoid; 250 | } 251 | #wrapper { 252 | background: #fff; 253 | color: #303030; 254 | padding: 10px; 255 | position: relative; 256 | text-indent: 0; 257 | } 258 | }@media screen { 259 | .inverted { 260 | background: #252a2a; 261 | } 262 | .inverted #wrapper { 263 | background: #252a2a; 264 | color: #eee; 265 | } 266 | .inverted hr { 267 | border-color: #333f40 !important; 268 | } 269 | .inverted p, .inverted td, .inverted li, .inverted h1, .inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6, .inverted th, .inverted .math, .inverted caption, .inverted dt, .inverted dd { 270 | color: #eee; 271 | } 272 | .inverted pre { 273 | background: #ccc; 274 | } 275 | .inverted pre code { 276 | color: #111; 277 | } 278 | .inverted table { 279 | background: none; 280 | } 281 | .inverted table tr:nth-child(odd), .inverted table td:nth-child(odd) { 282 | background: none; 283 | } 284 | .inverted a { 285 | color: #acd1d5; 286 | } 287 | ::selection { 288 | background: rgba(157, 193, 200, 0.5); 289 | } 290 | h1::selection { 291 | background-color: rgba(45, 156, 208, 0.3); 292 | } 293 | h2::selection { 294 | background-color: rgba(90, 182, 224, 0.3); 295 | } 296 | h3::selection, h4::selection, h5::selection, h6::selection, li::selection, ol::selection { 297 | background-color: rgba(133, 201, 232, 0.3); 298 | } 299 | code::selection { 300 | background-color: rgba(0, 0, 0, 0.7); 301 | color: #eee; 302 | } 303 | code span::selection { 304 | background-color: rgba(0, 0, 0, 0.7) !important; 305 | color: #eee !important; 306 | } 307 | a::selection { 308 | background-color: rgba(255, 230, 102, 0.2); 309 | } 310 | .inverted a::selection { 311 | background-color: rgba(255, 230, 102, 0.6); 312 | } 313 | td::selection, th::selection, caption::selection { 314 | background-color: rgba(180, 237, 95, 0.5); 315 | } 316 | } 317 | 318 | code { 319 | background-color: #fee9cc; 320 | border-radius: 3px; 321 | padding: 1px 3px; 322 | } 323 | -------------------------------------------------------------------------------- /academic-cv.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2019 Brett Terpstra 3 | Content is property of the document author 4 | Please leave this notice in place, along with any additional credits below. 5 | --------------------------------------------------------------- 6 | Title: Academic CV 7 | Author: Xule Lin 8 | Description: Academic style for CV 9 | paper size: US letter 10 | Notes: 12pt/16px, Times New Roman, Double-spaced, text-align left, headers adjusted for 1. section header, name, personal information, list style first level - none, second level - circle 11 | */ 12 | 13 | body { 14 | -webkit-font-smoothing: antialiased; 15 | font: normal 1em/2em "Times New Roman", courier, monospace; 16 | width: auto; } 17 | 18 | html > body { 19 | font-size: 12pt; 20 | text-align: left; 21 | line-height: 2em; 22 | padding-left: 1em} 23 | 24 | #wrapper img { 25 | max-width: 100%; 26 | height: auto; } 27 | #wrapper p { 28 | margin: 0in; 29 | text-indent: 0em; 30 | page-break-inside: auto; 31 | padding-left: 1em; 32 | line-height: 1em; 33 | margin-bottom: 2em} 34 | #wrapper ul, #wrapper ol { 35 | list-style-position: inside; 36 | font-weight: bold; 37 | padding: 0; 38 | margin-top: 1em; 39 | margin-bottom: 1em} 40 | #wrapper ul ul, #wrapper ul ol, #wrapper ol ul, #wrapper ol ol { 41 | font-weight: normal; 42 | padding-left: 0; 43 | margin-left: 1em; 44 | margin-top: 0em; } 45 | #wrapper ul { 46 | list-style-type: none; } 47 | #wrapper ul > li:before { 48 | content: ' '; } 49 | #wrapper ul > li:after { 50 | content: ' '; } 51 | #wrapper ul li > p:first-child { 52 | margin: 0; } 53 | #wrapper ul li p { 54 | display: inline; } 55 | #wrapper ul ul{ 56 | list-style-type: circle;} 57 | #wrapper ul ol { 58 | margin-bottom: 0; } 59 | #wrapper ol { 60 | list-style-type: circle; 61 | margin-left: 0.5in; } 62 | #wrapper ol ul, #wrapper ol ol { 63 | margin-bottom: 0; } 64 | 65 | h1, h2, h3, h4, h5, h6 { 66 | font-size: 12pt; 67 | } 68 | 69 | /*h1 is for section header*/ 70 | h1 { 71 | line-height: 1; 72 | text-align: left; 73 | font-weight: bold; 74 | text-transform: uppercase; 75 | margin-top: 1.5em; 76 | margin-bottom: 1em; 77 | border-bottom-style: solid; 78 | border-bottom-width: thin; 79 | } 80 | 81 | /*h2 is for name on top*/ 82 | h2 { 83 | font-size: 18pt; 84 | text-align: center; 85 | font-weight: bold; 86 | margin-top: 1em; 87 | margin-bottom: 0.5em; 88 | border-bottom-style: double; 89 | border-bottom-width: medium; 90 | } 91 | 92 | /*h3 is for personal information under name section*/ 93 | h3 { 94 | font-size: 12pt; 95 | line-height: 0.5em; 96 | width: 1; 97 | text-align: center; 98 | font-weight: normal; 99 | margin-top: 0em; 100 | margin-bottom: 0.5em; 101 | padding-left: 0.5em 102 | } 103 | 104 | hr { 105 | border: none; 106 | margin-top: 1; } 107 | 108 | body, p, td, div { 109 | line-height: 1em; 110 | color: #111111; 111 | word-wrap: break-word; } 112 | 113 | h1, h2, h3, h4, h5, h6 { 114 | color: #111111;} 115 | 116 | a { 117 | color: #111111; 118 | text-decoration: underline; 119 | -webkit-transition: color 0.2s ease-in-out; 120 | -moz-transition: color 0.2s ease-in-out; 121 | -o-transition: color 0.2s ease-in-out; 122 | -ms-transition: color 0.2s ease-in-out; 123 | transition: color 0.2s ease-in-out; } 124 | a:hover { 125 | color: #3593d9; } 126 | 127 | strong { 128 | font-weight: bold; 129 | } 130 | 131 | em { 132 | font-style: italic; 133 | } 134 | 135 | strong em, em strong { 136 | font-weight: 700; 137 | font-style: italic; } 138 | 139 | .footnote { 140 | color: #3c779c; 141 | font-size: 1em; 142 | vertical-align: super; } 143 | 144 | dd { 145 | margin-bottom: 0; } 146 | 147 | caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr { 148 | border-spacing: 0; } 149 | 150 | table { 151 | border: 1px solid rgba(0, 0, 0, 0.25); 152 | border-collapse: collapse; 153 | display: table; 154 | empty-cells: hide; 155 | margin: -1px 0 1em; 156 | padding: 0; 157 | table-layout: fixed; } 158 | 159 | caption { 160 | display: table-caption; 161 | } 162 | 163 | col { 164 | display: table-column; } 165 | 166 | colgroup { 167 | display: table-column-group; } 168 | 169 | tbody { 170 | display: table-row-group; } 171 | 172 | tfoot { 173 | display: table-footer-group; } 174 | 175 | thead { 176 | display: table-header-group; } 177 | 178 | td, th { 179 | display: table-cell; } 180 | 181 | tr { 182 | display: table-row; } 183 | 184 | table th, table td { 185 | padding: 0 1em; } 186 | 187 | table thead { 188 | background: rgba(0, 0, 0, 0.15); 189 | border: 1px solid rgba(0, 0, 0, 0.15); 190 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 191 | 192 | table tbody { 193 | background: rgba(0, 0, 0, 0.05); } 194 | 195 | table tfoot { 196 | background: rgba(0, 0, 0, 0.15); 197 | border: 1px solid rgba(0, 0, 0, 0.15); 198 | border-top: 1px solid rgba(0, 0, 0, 0.2); } 199 | 200 | figure { 201 | display: inline-block; 202 | position: relative; 203 | margin: 1em 0 1em; } 204 | 205 | figcaption { 206 | font-style: italic; 207 | text-align: center; 208 | background: white; 209 | color: #666666; 210 | position: absolute; 211 | left: 0; 212 | bottom: -24px; 213 | width: 98%; 214 | padding: 1%; 215 | -webkit-transition: all 0.2s ease-in-out; 216 | -moz-transition: all 0.2s ease-in-out; 217 | -o-transition: all 0.2s ease-in-out; 218 | -ms-transition: all 0.2s ease-in-out; 219 | transition: all 0.2s ease-in-out; } 220 | 221 | figure:hover > figcaption { 222 | /* background: rgba(0,0,0,1) */ } 223 | 224 | .poetry pre { 225 | display: block; 226 | font-style: italic; 227 | margin-left: 1em; } 228 | .poetry pre code { 229 | word-break: break-all; 230 | word-break: break-word; 231 | /* Non standard for webkit */ 232 | -webkit-hyphens: auto; 233 | -moz-hyphens: auto; 234 | hyphens: auto; 235 | white-space: pre-wrap; } 236 | 237 | blockquote { 238 | line-height: 1; /Chicago Style*/ 239 | text-indent: 0; 240 | padding-left: 0.5in; 241 | margin-bottom: 2; 242 | } 243 | 244 | #wrapper blockquote p { 245 | text-indent: 0; 246 | } 247 | 248 | sup, sub, a.footnote { 249 | font-size: 12pt; 250 | height: 0; 251 | line-height: 1; 252 | position: relative; 253 | vertical-align: super; } 254 | 255 | sub { 256 | vertical-align: sub; 257 | top: -1px; } 258 | 259 | p, h5 { 260 | margin: 0; } 261 | 262 | dt, th { 263 | font-weight: bold; 264 | } 265 | 266 | table tr:nth-child(odd), table th:nth-child(odd), table td:nth-child(odd) { 267 | background: rgba(255, 255, 255, 0.06); } 268 | 269 | table tr:nth-child(even), table td:nth-child(even) { 270 | background: rgba(200, 200, 200, 0.25); } 271 | 272 | /*Hanging indent for references generated by custom processor*/ 273 | .references.hanging-indent p { 274 | text-indent: -0.5in !important; /*to start the first line flush to the left, express in negative here whatever distance you placed in the margin-left setting above. */ 275 | margin-left: 0.5in !important; /*this controls how much to indent the lines in your reference. */ 276 | line-height: 1em; 277 | margin-top: 2em !important; 278 | margin-bottom: 2em !important; 279 | } 280 | 281 | 282 | @page { 283 | size: letter; 284 | margin: auto; 285 | } 286 | 287 | @media print { 288 | body { 289 | overflow: auto; } 290 | 291 | img, pre, blockquote, table, figure, p { 292 | page-break-inside: auto; } 293 | 294 | #wrapper { 295 | background: transparent; 296 | color: #000; 297 | position: relative; } } 298 | @media screen { 299 | .inverted { 300 | background: #252a2a; } 301 | .inverted #wrapper { 302 | background: #252a2a; 303 | color: #eeeeee; } 304 | .inverted hr { 305 | border-color: #333f40 !important; } 306 | .inverted p, .inverted td, .inverted li, .inverted h1, .inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6, .inverted th, .inverted .math, .inverted caption, .inverted dt, .inverted dd { 307 | color: #eeeeee; } 308 | .inverted table { 309 | background: none; } 310 | .inverted table tr:nth-child(odd), .inverted table td:nth-child(odd) { 311 | background: none; } 312 | .inverted a { 313 | color: #acd1d5; } 314 | 315 | ::selection { 316 | background: rgba(157, 193, 200, 0.5); } } 317 | -------------------------------------------------------------------------------- /styles/Academic CV.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2019 Brett Terpstra 3 | Content is property of the document author 4 | Please leave this notice in place, along with any additional credits below. 5 | --------------------------------------------------------------- 6 | Title: Academic CV 7 | Author: Xule Lin 8 | Description: Academic style for CV 9 | paper size: US letter 10 | Notes: 12pt/16px, Times New Roman, Double-spaced, text-align left, headers adjusted for 1. section header, name, personal information, list style first level - none, second level - circle 11 | */ 12 | 13 | body { 14 | -webkit-font-smoothing: antialiased; 15 | font: normal 1em/2em "Times New Roman", courier, monospace; 16 | width: auto; } 17 | 18 | html > body { 19 | font-size: 12pt; 20 | text-align: left; 21 | line-height: 2em; 22 | padding-left: 1em} 23 | 24 | #wrapper img { 25 | max-width: 100%; 26 | height: auto; } 27 | #wrapper p { 28 | margin: 0in; 29 | text-indent: 0em; 30 | page-break-inside: auto; 31 | padding-left: 1em; 32 | line-height: 1em; 33 | margin-bottom: 2em} 34 | #wrapper ul, #wrapper ol { 35 | list-style-position: inside; 36 | font-weight: bold; 37 | padding: 0; 38 | margin-top: 1em; 39 | margin-bottom: 1em} 40 | #wrapper ul ul, #wrapper ul ol, #wrapper ol ul, #wrapper ol ol { 41 | font-weight: normal; 42 | padding-left: 0; 43 | margin-left: 1em; 44 | margin-top: 0em; } 45 | #wrapper ul { 46 | list-style-type: none; } 47 | #wrapper ul > li:before { 48 | content: ' '; } 49 | #wrapper ul > li:after { 50 | content: ' '; } 51 | #wrapper ul li > p:first-child { 52 | margin: 0; } 53 | #wrapper ul li p { 54 | display: inline; } 55 | #wrapper ul ul{ 56 | list-style-type: circle;} 57 | #wrapper ul ol { 58 | margin-bottom: 0; } 59 | #wrapper ol { 60 | list-style-type: circle; 61 | margin-left: 0.5in; } 62 | #wrapper ol ul, #wrapper ol ol { 63 | margin-bottom: 0; } 64 | 65 | h1, h2, h3, h4, h5, h6 { 66 | font-size: 12pt; 67 | } 68 | 69 | /*h1 is for section header*/ 70 | h1 { 71 | line-height: 1; 72 | text-align: left; 73 | font-weight: bold; 74 | text-transform: uppercase; 75 | margin-top: 1.5em; 76 | margin-bottom: 1em; 77 | border-bottom-style: solid; 78 | border-bottom-width: thin; 79 | } 80 | 81 | /*h2 is for name on top*/ 82 | h2 { 83 | font-size: 18pt; 84 | text-align: center; 85 | font-weight: bold; 86 | margin-top: 1em; 87 | margin-bottom: 0.5em; 88 | border-bottom-style: double; 89 | border-bottom-width: medium; 90 | } 91 | 92 | /*h3 is for personal information under name section*/ 93 | h3 { 94 | font-size: 12pt; 95 | line-height: 0.5em; 96 | width: 1; 97 | text-align: center; 98 | font-weight: normal; 99 | margin-top: 0em; 100 | margin-bottom: 0.5em; 101 | padding-left: 0.5em 102 | } 103 | 104 | hr { 105 | border: none; 106 | margin-top: 1; } 107 | 108 | body, p, td, div { 109 | line-height: 1em; 110 | color: #111111; 111 | word-wrap: break-word; } 112 | 113 | h1, h2, h3, h4, h5, h6 { 114 | color: #111111;} 115 | 116 | a { 117 | color: #111111; 118 | text-decoration: underline; 119 | -webkit-transition: color 0.2s ease-in-out; 120 | -moz-transition: color 0.2s ease-in-out; 121 | -o-transition: color 0.2s ease-in-out; 122 | -ms-transition: color 0.2s ease-in-out; 123 | transition: color 0.2s ease-in-out; } 124 | a:hover { 125 | color: #3593d9; } 126 | 127 | strong { 128 | font-weight: bold; 129 | } 130 | 131 | em { 132 | font-style: italic; 133 | } 134 | 135 | strong em, em strong { 136 | font-weight: 700; 137 | font-style: italic; } 138 | 139 | .footnote { 140 | color: #3c779c; 141 | font-size: 1em; 142 | vertical-align: super; } 143 | 144 | dd { 145 | margin-bottom: 0; } 146 | 147 | caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr { 148 | border-spacing: 0; } 149 | 150 | table { 151 | border: 1px solid rgba(0, 0, 0, 0.25); 152 | border-collapse: collapse; 153 | display: table; 154 | empty-cells: hide; 155 | margin: -1px 0 1em; 156 | padding: 0; 157 | table-layout: fixed; } 158 | 159 | caption { 160 | display: table-caption; 161 | } 162 | 163 | col { 164 | display: table-column; } 165 | 166 | colgroup { 167 | display: table-column-group; } 168 | 169 | tbody { 170 | display: table-row-group; } 171 | 172 | tfoot { 173 | display: table-footer-group; } 174 | 175 | thead { 176 | display: table-header-group; } 177 | 178 | td, th { 179 | display: table-cell; } 180 | 181 | tr { 182 | display: table-row; } 183 | 184 | table th, table td { 185 | padding: 0 1em; } 186 | 187 | table thead { 188 | background: rgba(0, 0, 0, 0.15); 189 | border: 1px solid rgba(0, 0, 0, 0.15); 190 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 191 | 192 | table tbody { 193 | background: rgba(0, 0, 0, 0.05); } 194 | 195 | table tfoot { 196 | background: rgba(0, 0, 0, 0.15); 197 | border: 1px solid rgba(0, 0, 0, 0.15); 198 | border-top: 1px solid rgba(0, 0, 0, 0.2); } 199 | 200 | figure { 201 | display: inline-block; 202 | position: relative; 203 | margin: 1em 0 1em; } 204 | 205 | figcaption { 206 | font-style: italic; 207 | text-align: center; 208 | background: white; 209 | color: #666666; 210 | position: absolute; 211 | left: 0; 212 | bottom: -24px; 213 | width: 98%; 214 | padding: 1%; 215 | -webkit-transition: all 0.2s ease-in-out; 216 | -moz-transition: all 0.2s ease-in-out; 217 | -o-transition: all 0.2s ease-in-out; 218 | -ms-transition: all 0.2s ease-in-out; 219 | transition: all 0.2s ease-in-out; } 220 | 221 | figure:hover > figcaption { 222 | /* background: rgba(0,0,0,1) */ } 223 | 224 | .poetry pre { 225 | display: block; 226 | font-style: italic; 227 | margin-left: 1em; } 228 | .poetry pre code { 229 | word-break: break-all; 230 | word-break: break-word; 231 | /* Non standard for webkit */ 232 | -webkit-hyphens: auto; 233 | -moz-hyphens: auto; 234 | hyphens: auto; 235 | white-space: pre-wrap; } 236 | 237 | blockquote { 238 | line-height: 1; /Chicago Style*/ 239 | text-indent: 0; 240 | padding-left: 0.5in; 241 | margin-bottom: 2; 242 | } 243 | 244 | #wrapper blockquote p { 245 | text-indent: 0; 246 | } 247 | 248 | sup, sub, a.footnote { 249 | font-size: 12pt; 250 | height: 0; 251 | line-height: 1; 252 | position: relative; 253 | vertical-align: super; } 254 | 255 | sub { 256 | vertical-align: sub; 257 | top: -1px; } 258 | 259 | p, h5 { 260 | margin: 0; } 261 | 262 | dt, th { 263 | font-weight: bold; 264 | } 265 | 266 | table tr:nth-child(odd), table th:nth-child(odd), table td:nth-child(odd) { 267 | background: rgba(255, 255, 255, 0.06); } 268 | 269 | table tr:nth-child(even), table td:nth-child(even) { 270 | background: rgba(200, 200, 200, 0.25); } 271 | 272 | /*Hanging indent for references generated by custom processor*/ 273 | .references.hanging-indent p { 274 | text-indent: -0.5in !important; /*to start the first line flush to the left, express in negative here whatever distance you placed in the margin-left setting above. */ 275 | margin-left: 0.5in !important; /*this controls how much to indent the lines in your reference. */ 276 | line-height: 1em; 277 | margin-top: 2em !important; 278 | margin-bottom: 2em !important; 279 | } 280 | 281 | 282 | @page { 283 | size: letter; 284 | margin: auto; 285 | } 286 | 287 | @media print { 288 | body { 289 | overflow: auto; } 290 | 291 | img, pre, blockquote, table, figure, p { 292 | page-break-inside: auto; } 293 | 294 | #wrapper { 295 | background: transparent; 296 | color: #000; 297 | position: relative; } } 298 | @media screen { 299 | .inverted { 300 | background: #252a2a; } 301 | .inverted #wrapper { 302 | background: #252a2a; 303 | color: #eeeeee; } 304 | .inverted hr { 305 | border-color: #333f40 !important; } 306 | .inverted p, .inverted td, .inverted li, .inverted h1, .inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6, .inverted th, .inverted .math, .inverted caption, .inverted dt, .inverted dd { 307 | color: #eeeeee; } 308 | .inverted table { 309 | background: none; } 310 | .inverted table tr:nth-child(odd), .inverted table td:nth-child(odd) { 311 | background: none; } 312 | .inverted a { 313 | color: #acd1d5; } 314 | 315 | ::selection { 316 | background: rgba(157, 193, 200, 0.5); } } -------------------------------------------------------------------------------- /generate_examples/styles/academic-cv.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2019 Brett Terpstra 3 | Content is property of the document author 4 | Please leave this notice in place, along with any additional credits below. 5 | --------------------------------------------------------------- 6 | Title: Academic CV 7 | Author: Xule Lin 8 | Description: Academic style for CV 9 | paper size: US letter 10 | Notes: 12pt/16px, Times New Roman, Double-spaced, text-align left, headers adjusted for 1. section header, name, personal information, list style first level - none, second level - circle 11 | */ 12 | 13 | body { 14 | -webkit-font-smoothing: antialiased; 15 | font: normal 1em/2em "Times New Roman", courier, monospace; 16 | width: auto; } 17 | 18 | html > body { 19 | font-size: 12pt; 20 | text-align: left; 21 | line-height: 2em; 22 | padding-left: 1em} 23 | 24 | #wrapper img { 25 | max-width: 100%; 26 | height: auto; } 27 | #wrapper p { 28 | margin: 0in; 29 | text-indent: 0em; 30 | page-break-inside: auto; 31 | padding-left: 1em; 32 | line-height: 1em; 33 | margin-bottom: 2em} 34 | #wrapper ul, #wrapper ol { 35 | list-style-position: inside; 36 | font-weight: bold; 37 | padding: 0; 38 | margin-top: 1em; 39 | margin-bottom: 1em} 40 | #wrapper ul ul, #wrapper ul ol, #wrapper ol ul, #wrapper ol ol { 41 | font-weight: normal; 42 | padding-left: 0; 43 | margin-left: 1em; 44 | margin-top: 0em; } 45 | #wrapper ul { 46 | list-style-type: none; } 47 | #wrapper ul > li:before { 48 | content: ' '; } 49 | #wrapper ul > li:after { 50 | content: ' '; } 51 | #wrapper ul li > p:first-child { 52 | margin: 0; } 53 | #wrapper ul li p { 54 | display: inline; } 55 | #wrapper ul ul{ 56 | list-style-type: circle;} 57 | #wrapper ul ol { 58 | margin-bottom: 0; } 59 | #wrapper ol { 60 | list-style-type: circle; 61 | margin-left: 0.5in; } 62 | #wrapper ol ul, #wrapper ol ol { 63 | margin-bottom: 0; } 64 | 65 | h1, h2, h3, h4, h5, h6 { 66 | font-size: 12pt; 67 | } 68 | 69 | /*h1 is for section header*/ 70 | h1 { 71 | line-height: 1; 72 | text-align: left; 73 | font-weight: bold; 74 | text-transform: uppercase; 75 | margin-top: 1.5em; 76 | margin-bottom: 1em; 77 | border-bottom-style: solid; 78 | border-bottom-width: thin; 79 | } 80 | 81 | /*h2 is for name on top*/ 82 | h2 { 83 | font-size: 18pt; 84 | text-align: center; 85 | font-weight: bold; 86 | margin-top: 1em; 87 | margin-bottom: 0.5em; 88 | border-bottom-style: double; 89 | border-bottom-width: medium; 90 | } 91 | 92 | /*h3 is for personal information under name section*/ 93 | h3 { 94 | font-size: 12pt; 95 | line-height: 0.5em; 96 | width: 1; 97 | text-align: center; 98 | font-weight: normal; 99 | margin-top: 0em; 100 | margin-bottom: 0.5em; 101 | padding-left: 0.5em 102 | } 103 | 104 | hr { 105 | border: none; 106 | margin-top: 1; } 107 | 108 | body, p, td, div { 109 | line-height: 1em; 110 | color: #111111; 111 | word-wrap: break-word; } 112 | 113 | h1, h2, h3, h4, h5, h6 { 114 | color: #111111;} 115 | 116 | a { 117 | color: #111111; 118 | text-decoration: underline; 119 | -webkit-transition: color 0.2s ease-in-out; 120 | -moz-transition: color 0.2s ease-in-out; 121 | -o-transition: color 0.2s ease-in-out; 122 | -ms-transition: color 0.2s ease-in-out; 123 | transition: color 0.2s ease-in-out; } 124 | a:hover { 125 | color: #3593d9; } 126 | 127 | strong { 128 | font-weight: bold; 129 | } 130 | 131 | em { 132 | font-style: italic; 133 | } 134 | 135 | strong em, em strong { 136 | font-weight: 700; 137 | font-style: italic; } 138 | 139 | .footnote { 140 | color: #3c779c; 141 | font-size: 1em; 142 | vertical-align: super; } 143 | 144 | dd { 145 | margin-bottom: 0; } 146 | 147 | caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr { 148 | border-spacing: 0; } 149 | 150 | table { 151 | border: 1px solid rgba(0, 0, 0, 0.25); 152 | border-collapse: collapse; 153 | display: table; 154 | empty-cells: hide; 155 | margin: -1px 0 1em; 156 | padding: 0; 157 | table-layout: fixed; } 158 | 159 | caption { 160 | display: table-caption; 161 | } 162 | 163 | col { 164 | display: table-column; } 165 | 166 | colgroup { 167 | display: table-column-group; } 168 | 169 | tbody { 170 | display: table-row-group; } 171 | 172 | tfoot { 173 | display: table-footer-group; } 174 | 175 | thead { 176 | display: table-header-group; } 177 | 178 | td, th { 179 | display: table-cell; } 180 | 181 | tr { 182 | display: table-row; } 183 | 184 | table th, table td { 185 | padding: 0 1em; } 186 | 187 | table thead { 188 | background: rgba(0, 0, 0, 0.15); 189 | border: 1px solid rgba(0, 0, 0, 0.15); 190 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 191 | 192 | table tbody { 193 | background: rgba(0, 0, 0, 0.05); } 194 | 195 | table tfoot { 196 | background: rgba(0, 0, 0, 0.15); 197 | border: 1px solid rgba(0, 0, 0, 0.15); 198 | border-top: 1px solid rgba(0, 0, 0, 0.2); } 199 | 200 | figure { 201 | display: inline-block; 202 | position: relative; 203 | margin: 1em 0 1em; } 204 | 205 | figcaption { 206 | font-style: italic; 207 | text-align: center; 208 | background: white; 209 | color: #666666; 210 | position: absolute; 211 | left: 0; 212 | bottom: -24px; 213 | width: 98%; 214 | padding: 1%; 215 | -webkit-transition: all 0.2s ease-in-out; 216 | -moz-transition: all 0.2s ease-in-out; 217 | -o-transition: all 0.2s ease-in-out; 218 | -ms-transition: all 0.2s ease-in-out; 219 | transition: all 0.2s ease-in-out; } 220 | 221 | figure:hover > figcaption { 222 | /* background: rgba(0,0,0,1) */ } 223 | 224 | .poetry pre { 225 | display: block; 226 | font-style: italic; 227 | margin-left: 1em; } 228 | .poetry pre code { 229 | word-break: break-all; 230 | word-break: break-word; 231 | /* Non standard for webkit */ 232 | -webkit-hyphens: auto; 233 | -moz-hyphens: auto; 234 | hyphens: auto; 235 | white-space: pre-wrap; } 236 | 237 | blockquote { 238 | line-height: 1; /Chicago Style*/ 239 | text-indent: 0; 240 | padding-left: 0.5in; 241 | margin-bottom: 2; 242 | } 243 | 244 | #wrapper blockquote p { 245 | text-indent: 0; 246 | } 247 | 248 | sup, sub, a.footnote { 249 | font-size: 12pt; 250 | height: 0; 251 | line-height: 1; 252 | position: relative; 253 | vertical-align: super; } 254 | 255 | sub { 256 | vertical-align: sub; 257 | top: -1px; } 258 | 259 | p, h5 { 260 | margin: 0; } 261 | 262 | dt, th { 263 | font-weight: bold; 264 | } 265 | 266 | table tr:nth-child(odd), table th:nth-child(odd), table td:nth-child(odd) { 267 | background: rgba(255, 255, 255, 0.06); } 268 | 269 | table tr:nth-child(even), table td:nth-child(even) { 270 | background: rgba(200, 200, 200, 0.25); } 271 | 272 | /*Hanging indent for references generated by custom processor*/ 273 | .references.hanging-indent p { 274 | text-indent: -0.5in !important; /*to start the first line flush to the left, express in negative here whatever distance you placed in the margin-left setting above. */ 275 | margin-left: 0.5in !important; /*this controls how much to indent the lines in your reference. */ 276 | line-height: 1em; 277 | margin-top: 2em !important; 278 | margin-bottom: 2em !important; 279 | } 280 | 281 | 282 | @page { 283 | size: letter; 284 | margin: auto; 285 | } 286 | 287 | @media print { 288 | body { 289 | overflow: auto; } 290 | 291 | img, pre, blockquote, table, figure, p { 292 | page-break-inside: auto; } 293 | 294 | #wrapper { 295 | background: transparent; 296 | color: #000; 297 | position: relative; } } 298 | @media screen { 299 | .inverted { 300 | background: #252a2a; } 301 | .inverted #wrapper { 302 | background: #252a2a; 303 | color: #eeeeee; } 304 | .inverted hr { 305 | border-color: #333f40 !important; } 306 | .inverted p, .inverted td, .inverted li, .inverted h1, .inverted h2, .inverted h3, .inverted h4, .inverted h5, .inverted h6, .inverted th, .inverted .math, .inverted caption, .inverted dt, .inverted dd { 307 | color: #eeeeee; } 308 | .inverted table { 309 | background: none; } 310 | .inverted table tr:nth-child(odd), .inverted table td:nth-child(odd) { 311 | background: none; } 312 | .inverted a { 313 | color: #acd1d5; } 314 | 315 | ::selection { 316 | background: rgba(157, 193, 200, 0.5); } } 317 | -------------------------------------------------------------------------------- /Base16/Base16 3024.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2011 Brett Terpstra 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Base16 3024 6 | Author: Newton https://github.com/chrisopedia/base16-marked 7 | Description: Based on Chris Kempson's Base16 color scheme 8 | */ 9 | /* @TODO: tables */ 10 | /* @TODO: fenced code blocks */ 11 | /* @TODO: code syntax hightlighting */ 12 | body { 13 | background-color: #f7f7f7; 14 | -webkit-font-smoothing: antialiased; 15 | font: normal .8764em/1.5em Arial,Verdana,sans-serif; 16 | margin: 0; 17 | } 18 | 19 | html>body { 20 | font-size: 13px; 21 | } 22 | 23 | h1 { 24 | /* base00 */ 25 | color: #01a0e4; 26 | font-size: 2.2857em; 27 | line-height: .6563em; 28 | margin: .6563em 0; 29 | } 30 | 31 | h2 { 32 | color: #01a0e4; 33 | font-size: 1.7143em; 34 | line-height: .875em; 35 | margin: .875em 0; 36 | } 37 | 38 | h3 { 39 | color: #01a0e4; 40 | font-size: 1.5em; 41 | line-height: 1em; 42 | margin: 1em 0; 43 | } 44 | 45 | h4 { 46 | color: #01a0e4; 47 | font-size: 1.2857em; 48 | line-height: 1.1667em; 49 | margin: 1.1667em 0; 50 | } 51 | 52 | h5 { 53 | color: #01a0e4; 54 | font-size: 1.15em; 55 | line-height: 1.3em; 56 | margin: 1.3em 0; 57 | } 58 | 59 | h6 { 60 | color: #01a0e4; 61 | font-size: 1em; 62 | line-height: 1.5em; 63 | margin: 1.5em 0; 64 | } 65 | 66 | h1,h2,h3,h4,h5,h6 { 67 | line-height: 1.5em; 68 | } 69 | 70 | body,p,td,div { 71 | color: #4a4543; 72 | font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; 73 | word-wrap: break-word; 74 | } 75 | 76 | a { 77 | -webkit-transition: color .2s ease-in-out; 78 | -moz-transition: color .2s ease-in-out; 79 | -o-transition: color .2s ease-in-out; 80 | -ms-transition: color .2s ease-in-out; 81 | transition: color .2s ease-in-out; 82 | color: #e8bbd0; 83 | text-decoration: none; 84 | } 85 | 86 | a[href^="mailto"] { 87 | color: #b5e4f4; 88 | } 89 | 90 | a:hover { 91 | color: #e8bbd0; 92 | } 93 | 94 | li { 95 | font-size: 110%; 96 | } 97 | 98 | li li { 99 | font-size: 100%; 100 | } 101 | 102 | li p { 103 | font-size: 100%; 104 | margin: .5em 0; 105 | } 106 | 107 | .footnote { 108 | color: #807d7c; 109 | font-size: .8em; 110 | vertical-align: super; 111 | } 112 | 113 | hr { 114 | height: 10px; 115 | border: none; 116 | background-color: #a5a2a2; 117 | color: #4a4543; 118 | } 119 | 120 | #wrapper img { 121 | max-width: 100%; 122 | height: auto; 123 | } 124 | 125 | strong, b { 126 | color: #fded02; 127 | } 128 | 129 | em, i { 130 | color: #a16a94; 131 | } 132 | 133 | dd { 134 | margin-bottom: 1em; 135 | } 136 | 137 | li { 138 | list-style: none; 139 | position: relative; 140 | } 141 | li::before { 142 | position: absolute; 143 | top: 0; 144 | left: -17px; 145 | color: #db2d20; 146 | } 147 | ul li::before { 148 | font-size: 160%; 149 | content: '\2022'; 150 | } 151 | 152 | ol { 153 | counter-reset: index; 154 | } 155 | 156 | ol li { 157 | counter-increment: index; 158 | } 159 | 160 | ol li::before { 161 | content: counter(index) "."; 162 | } 163 | 164 | li > p:first-child { 165 | margin: 0; 166 | } 167 | 168 | ul ul,ul ol { 169 | margin-bottom: .4em; 170 | } 171 | 172 | caption,col,colgroup,table,tbody,td,tfoot,th,thead,tr { 173 | border-spacing: 0; 174 | } 175 | 176 | table { 177 | border: 1px solid rgba(0,0,0,0.25); 178 | border-collapse: collapse; 179 | display: table; 180 | empty-cells: hide; 181 | margin: -1px 0 23px; 182 | padding: 0; 183 | table-layout: fixed; 184 | } 185 | 186 | caption { 187 | display: table-caption; 188 | font-weight: 700; 189 | } 190 | 191 | col { 192 | display: table-column; 193 | } 194 | 195 | colgroup { 196 | display: table-column-group; 197 | } 198 | 199 | tbody { 200 | display: table-row-group; 201 | } 202 | 203 | tfoot { 204 | display: table-footer-group; 205 | } 206 | 207 | thead { 208 | display: table-header-group; 209 | } 210 | 211 | td,th { 212 | display: table-cell; 213 | } 214 | 215 | tr { 216 | display: table-row; 217 | } 218 | 219 | table th,table td { 220 | font-size: 1.1em; 221 | line-height: 23px; 222 | padding: 0 1em; 223 | } 224 | 225 | table thead { 226 | background: rgba(0,0,0,0.15); 227 | border: 1px solid rgba(0,0,0,0.15); 228 | border-bottom: 1px solid rgba(0,0,0,0.2); 229 | } 230 | 231 | table tbody { 232 | background: rgba(0,0,0,0.05); 233 | } 234 | 235 | table tfoot { 236 | background: rgba(0,0,0,0.15); 237 | border: 1px solid rgba(0,0,0,0.15); 238 | border-top: 1px solid rgba(0,0,0,0.2); 239 | } 240 | 241 | figure { 242 | display: inline-block; 243 | position: relative; 244 | margin: 1em 0 2em; 245 | } 246 | 247 | figcaption { 248 | font-style: italic; 249 | text-align: center; 250 | background: white; 251 | color: #b5e4f4; 252 | position: absolute; 253 | left: 0; 254 | bottom: -24px; 255 | width: 98%; 256 | padding: 1%; 257 | -webkit-transition: all .2s ease-in-out; 258 | -moz-transition: all .2s ease-in-out; 259 | -o-transition: all .2s ease-in-out; 260 | -ms-transition: all .2s ease-in-out; 261 | transition: all .2s ease-in-out; 262 | } 263 | 264 | figure:hover>figcaption { 265 | /* background: rgba(0,0,0,1) */ 266 | } 267 | 268 | code { 269 | color: #01a252; 270 | } 271 | 272 | .poetry pre { 273 | display: block; 274 | font-family: Georgia, Garamond, serif !important; 275 | font-size: 110% !important; 276 | font-style: italic; 277 | line-height: 1.6em; 278 | margin-left: 1em; 279 | } 280 | 281 | .poetry pre code { 282 | font-family: Georgia, Garamond, serif !important; 283 | } 284 | 285 | blockquote p { 286 | font-size: 110%; 287 | font-style: italic; 288 | line-height: 1.6em; 289 | } 290 | 291 | sup,sub,a.footnote { 292 | font-size: 1.4ex; 293 | height: 0; 294 | line-height: 1; 295 | position: relative; 296 | vertical-align: super; 297 | } 298 | 299 | sub { 300 | vertical-align: sub; 301 | top: -1px; 302 | } 303 | 304 | p,h5 { 305 | font-size: 1.1429em; 306 | line-height: 1.3125em; 307 | margin: 1.3125em 0; 308 | } 309 | 310 | dt,th { 311 | font-weight: 700; 312 | } 313 | 314 | table tr:nth-child(odd),table th:nth-child(odd),table td:nth-child(odd) { 315 | background: rgba(255,255,255,0.06); 316 | } 317 | 318 | table tr:nth-child(even),table td:nth-child(even) { 319 | background: rgba(200,200,200,0.25); 320 | } 321 | 322 | @media print { 323 | body { 324 | overflow: auto; 325 | } 326 | 327 | img,pre,blockquote,table,figure,p { 328 | page-break-inside: avoid; 329 | } 330 | 331 | #wrapper { 332 | background-color: #f7f7f7; 333 | color: #4a4543; 334 | font-size: 85%; 335 | padding: 10px; 336 | position: relative; 337 | text-indent: 0; 338 | } 339 | } 340 | 341 | @media screen { 342 | .inverted #wrapper,.inverted { 343 | background: #090300; 344 | } 345 | 346 | .inverted hr { 347 | color: #a5a2a2; 348 | background-color: 4a4543 349 | } 350 | 351 | .inverted p,.inverted td, .inverted div { 352 | color: #a5a2a2 !important; 353 | } 354 | 355 | .inverted table tr:nth-child(odd),.inverted table th:nth-child(odd),.inverted table td:nth-child(odd) { 356 | background: none; 357 | } 358 | 359 | #wrapper { 360 | padding: 20px; 361 | } 362 | 363 | ::selection { 364 | background: #a5a2a2; 365 | color: #4a4543; 366 | } 367 | .inverted::selection { 368 | color: #a5a2a2; 369 | background: #4a4543; 370 | } 371 | 372 | h1::selection { 373 | background-color: rgba(45, 156, 208, .3); 374 | } 375 | 376 | h2::selection { 377 | background-color: rgba(90, 182, 224, .3); 378 | } 379 | 380 | h3::selection,h4::selection,h5::selection,h6::selection,li::selection,ol::selection { 381 | background-color: rgba(133, 201, 232, .3); 382 | } 383 | 384 | code::selection { 385 | background-color: rgba(0,0,0,.7); 386 | color: #eee; 387 | } 388 | 389 | code span::selection { 390 | background-color: rgba(0,0,0,.7) !important; 391 | color: #eee !important; 392 | } 393 | 394 | a::selection { 395 | background-color: rgba(255, 230, 102,.2); 396 | } 397 | 398 | .inverted a::selection { 399 | background-color: rgba(255, 230, 102,.6); 400 | } 401 | 402 | td::selection,th::selection,caption::selection { 403 | background-color: rgba(180, 237, 95, .5); 404 | } 405 | } 406 | -------------------------------------------------------------------------------- /Base16/Base16 Ashes.css: -------------------------------------------------------------------------------- 1 | /* 2 | This document has been created with Marked.app , Copyright 2011 Brett Terpstra 3 | Please leave this notice in place, along with any additional credits below. 4 | --------------------------------------------------------------- 5 | Title: Base16 Ashes 6 | Author: Newton https://github.com/chrisopedia/base16-marked 7 | Description: Based on Chris Kempson's Base16 color scheme 8 | */ 9 | /* @TODO: tables */ 10 | /* @TODO: fenced code blocks */ 11 | /* @TODO: code syntax hightlighting */ 12 | body { 13 | background-color: #F3F4F5; 14 | -webkit-font-smoothing: antialiased; 15 | font: normal .8764em/1.5em Arial,Verdana,sans-serif; 16 | margin: 0; 17 | } 18 | 19 | html>body { 20 | font-size: 13px; 21 | } 22 | 23 | h1 { 24 | /* base00 */ 25 | color: #AE95C7; 26 | font-size: 2.2857em; 27 | line-height: .6563em; 28 | margin: .6563em 0; 29 | } 30 | 31 | h2 { 32 | color: #AE95C7; 33 | font-size: 1.7143em; 34 | line-height: .875em; 35 | margin: .875em 0; 36 | } 37 | 38 | h3 { 39 | color: #AE95C7; 40 | font-size: 1.5em; 41 | line-height: 1em; 42 | margin: 1em 0; 43 | } 44 | 45 | h4 { 46 | color: #AE95C7; 47 | font-size: 1.2857em; 48 | line-height: 1.1667em; 49 | margin: 1.1667em 0; 50 | } 51 | 52 | h5 { 53 | color: #AE95C7; 54 | font-size: 1.15em; 55 | line-height: 1.3em; 56 | margin: 1.3em 0; 57 | } 58 | 59 | h6 { 60 | color: #AE95C7; 61 | font-size: 1em; 62 | line-height: 1.5em; 63 | margin: 1.5em 0; 64 | } 65 | 66 | h1,h2,h3,h4,h5,h6 { 67 | line-height: 1.5em; 68 | } 69 | 70 | body,p,td,div { 71 | color: #565E65; 72 | font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; 73 | word-wrap: break-word; 74 | } 75 | 76 | a { 77 | -webkit-transition: color .2s ease-in-out; 78 | -moz-transition: color .2s ease-in-out; 79 | -o-transition: color .2s ease-in-out; 80 | -ms-transition: color .2s ease-in-out; 81 | transition: color .2s ease-in-out; 82 | color: #C7C795; 83 | text-decoration: none; 84 | } 85 | 86 | a[href^="mailto"] { 87 | color: #95AEC7; 88 | } 89 | 90 | a:hover { 91 | color: #C7C795; 92 | } 93 | 94 | li { 95 | font-size: 110%; 96 | } 97 | 98 | li li { 99 | font-size: 100%; 100 | } 101 | 102 | li p { 103 | font-size: 100%; 104 | margin: .5em 0; 105 | } 106 | 107 | .footnote { 108 | color: #ADB3BA; 109 | font-size: .8em; 110 | vertical-align: super; 111 | } 112 | 113 | hr { 114 | height: 10px; 115 | border: none; 116 | background-color: #C7CCD1; 117 | color: #565E65; 118 | } 119 | 120 | #wrapper img { 121 | max-width: 100%; 122 | height: auto; 123 | } 124 | 125 | strong, b { 126 | color: #AEC795; 127 | } 128 | 129 | em, i { 130 | color: #C795AE; 131 | } 132 | 133 | dd { 134 | margin-bottom: 1em; 135 | } 136 | 137 | li { 138 | list-style: none; 139 | position: relative; 140 | } 141 | li::before { 142 | position: absolute; 143 | top: 0; 144 | left: -17px; 145 | color: #C7AE95; 146 | } 147 | ul li::before { 148 | font-size: 160%; 149 | content: '\2022'; 150 | } 151 | 152 | ol { 153 | counter-reset: index; 154 | } 155 | 156 | ol li { 157 | counter-increment: index; 158 | } 159 | 160 | ol li::before { 161 | content: counter(index) "."; 162 | } 163 | 164 | li > p:first-child { 165 | margin: 0; 166 | } 167 | 168 | ul ul,ul ol { 169 | margin-bottom: .4em; 170 | } 171 | 172 | caption,col,colgroup,table,tbody,td,tfoot,th,thead,tr { 173 | border-spacing: 0; 174 | } 175 | 176 | table { 177 | border: 1px solid rgba(0,0,0,0.25); 178 | border-collapse: collapse; 179 | display: table; 180 | empty-cells: hide; 181 | margin: -1px 0 23px; 182 | padding: 0; 183 | table-layout: fixed; 184 | } 185 | 186 | caption { 187 | display: table-caption; 188 | font-weight: 700; 189 | } 190 | 191 | col { 192 | display: table-column; 193 | } 194 | 195 | colgroup { 196 | display: table-column-group; 197 | } 198 | 199 | tbody { 200 | display: table-row-group; 201 | } 202 | 203 | tfoot { 204 | display: table-footer-group; 205 | } 206 | 207 | thead { 208 | display: table-header-group; 209 | } 210 | 211 | td,th { 212 | display: table-cell; 213 | } 214 | 215 | tr { 216 | display: table-row; 217 | } 218 | 219 | table th,table td { 220 | font-size: 1.1em; 221 | line-height: 23px; 222 | padding: 0 1em; 223 | } 224 | 225 | table thead { 226 | background: rgba(0,0,0,0.15); 227 | border: 1px solid rgba(0,0,0,0.15); 228 | border-bottom: 1px solid rgba(0,0,0,0.2); 229 | } 230 | 231 | table tbody { 232 | background: rgba(0,0,0,0.05); 233 | } 234 | 235 | table tfoot { 236 | background: rgba(0,0,0,0.15); 237 | border: 1px solid rgba(0,0,0,0.15); 238 | border-top: 1px solid rgba(0,0,0,0.2); 239 | } 240 | 241 | figure { 242 | display: inline-block; 243 | position: relative; 244 | margin: 1em 0 2em; 245 | } 246 | 247 | figcaption { 248 | font-style: italic; 249 | text-align: center; 250 | background: white; 251 | color: #95AEC7; 252 | position: absolute; 253 | left: 0; 254 | bottom: -24px; 255 | width: 98%; 256 | padding: 1%; 257 | -webkit-transition: all .2s ease-in-out; 258 | -moz-transition: all .2s ease-in-out; 259 | -o-transition: all .2s ease-in-out; 260 | -ms-transition: all .2s ease-in-out; 261 | transition: all .2s ease-in-out; 262 | } 263 | 264 | figure:hover>figcaption { 265 | /* background: rgba(0,0,0,1) */ 266 | } 267 | 268 | code { 269 | color: #95C7AE; 270 | } 271 | 272 | .poetry pre { 273 | display: block; 274 | font-family: Georgia, Garamond, serif !important; 275 | font-size: 110% !important; 276 | font-style: italic; 277 | line-height: 1.6em; 278 | margin-left: 1em; 279 | } 280 | 281 | .poetry pre code { 282 | font-family: Georgia, Garamond, serif !important; 283 | } 284 | 285 | blockquote p { 286 | font-size: 110%; 287 | font-style: italic; 288 | line-height: 1.6em; 289 | } 290 | 291 | sup,sub,a.footnote { 292 | font-size: 1.4ex; 293 | height: 0; 294 | line-height: 1; 295 | position: relative; 296 | vertical-align: super; 297 | } 298 | 299 | sub { 300 | vertical-align: sub; 301 | top: -1px; 302 | } 303 | 304 | p,h5 { 305 | font-size: 1.1429em; 306 | line-height: 1.3125em; 307 | margin: 1.3125em 0; 308 | } 309 | 310 | dt,th { 311 | font-weight: 700; 312 | } 313 | 314 | table tr:nth-child(odd),table th:nth-child(odd),table td:nth-child(odd) { 315 | background: rgba(255,255,255,0.06); 316 | } 317 | 318 | table tr:nth-child(even),table td:nth-child(even) { 319 | background: rgba(200,200,200,0.25); 320 | } 321 | 322 | @media print { 323 | body { 324 | overflow: auto; 325 | } 326 | 327 | img,pre,blockquote,table,figure,p { 328 | page-break-inside: avoid; 329 | } 330 | 331 | #wrapper { 332 | background-color: #F3F4F5; 333 | color: #565E65; 334 | font-size: 85%; 335 | padding: 10px; 336 | position: relative; 337 | text-indent: 0; 338 | } 339 | } 340 | 341 | @media screen { 342 | .inverted #wrapper,.inverted { 343 | background: #1C2023; 344 | } 345 | 346 | .inverted hr { 347 | color: #C7CCD1; 348 | background-color: 565E65 349 | } 350 | 351 | .inverted p,.inverted td, .inverted div { 352 | color: #C7CCD1 !important; 353 | } 354 | 355 | .inverted table tr:nth-child(odd),.inverted table th:nth-child(odd),.inverted table td:nth-child(odd) { 356 | background: none; 357 | } 358 | 359 | #wrapper { 360 | padding: 20px; 361 | } 362 | 363 | ::selection { 364 | background: #C7CCD1; 365 | color: #565E65; 366 | } 367 | .inverted::selection { 368 | color: #C7CCD1; 369 | background: #565E65; 370 | } 371 | 372 | h1::selection { 373 | background-color: rgba(45, 156, 208, .3); 374 | } 375 | 376 | h2::selection { 377 | background-color: rgba(90, 182, 224, .3); 378 | } 379 | 380 | h3::selection,h4::selection,h5::selection,h6::selection,li::selection,ol::selection { 381 | background-color: rgba(133, 201, 232, .3); 382 | } 383 | 384 | code::selection { 385 | background-color: rgba(0,0,0,.7); 386 | color: #eee; 387 | } 388 | 389 | code span::selection { 390 | background-color: rgba(0,0,0,.7) !important; 391 | color: #eee !important; 392 | } 393 | 394 | a::selection { 395 | background-color: rgba(255, 230, 102,.2); 396 | } 397 | 398 | .inverted a::selection { 399 | background-color: rgba(255, 230, 102,.6); 400 | } 401 | 402 | td::selection,th::selection,caption::selection { 403 | background-color: rgba(180, 237, 95, .5); 404 | } 405 | } 406 | --------------------------------------------------------------------------------