Git Product home page Git Product logo

markedcustomstyles's Introduction

Custom Styles for Marked 2

Want a quick look at some of the current styles in this repository? Browse the gallery.

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.

Please customize and include the contents of Header.css in any submitted styles. The portion between the --- borders should be in YAML format.

/*
This document has been created with Marked.app <http://marked2app.com>
Content is property of the document author
Please leave this notice in place, along with any additional credits below.
---------------------------------------------------------------
Title: Your style title
Author: Your Name
URL: <your url>
Description: Description of theme
Fonts: (optional) [Rockwell, Rokkit, etc.]
Note: (optional) Additional notes, where to get custom fonts, etc.
---
*/

Using a Style

When viewed through the gallery, every style has an "Install" button that will automatically save and load the Custom Style in Marked for you.

To install manually:

  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.

  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.

Custom Styles are added to the keyboard menu under Command-Opt-#, where # is 1-9 in the order they're added.

Creating a Style

I've been creating my styles with Compass and Sass, with a document containing a full range of markup elements 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.

The document markup hasn't changed between v1 and v2 of Marked, so the original style guide 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.

The one thing your Style does need (aside from looking great in Marked), is the Header.css information, customized to your Style. Just stick it at the top.

Thanks, and I hope you'll consider sharing the custom styles you create, even if they're revisions and evolutions of existing styles!

markedcustomstyles's People

Contributors

acusti avatar atelierbram avatar davepwsmith avatar derekvan avatar fractaledmind avatar gildotdev avatar jslvtr avatar rcraggs avatar rdela avatar semicolonsnet avatar stvhwrd avatar ttscoff avatar wschott avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

markedcustomstyles's Issues

Styles don't export to PDFs

Hello,

I'm having an issue where my styles do not seem to export to PDFs when using the Pesto template. Preview shows the styles perfectly, but when I export them I get some very ugly results. The text doesn't even display and/or is white.

When I try to export to HTML, everything just crashes. Let me know if there's anything else I can do to help.

invoice style

I made a style that I use for my invoices, but don't know if this is in the scope of this project

Dark Theme

Hey Brett

I am trying to hunt down a good dark theme for Marked2, and am wondering if you have some suggestions. I have scoured google, but hard to find something which has "preview" so I can actually see the in the wild.

If you have any suggestions, I would greatly appreciate. In the meantime, I will continue to my search :-)

Yeti style not wrapping long urls

Yeti is one of the best Marked Styles, but it is not wrapping long URLs with no spaces between words.

You can see this issue in screenshot below.
141026-0001

How do I style footer for paginated pdf?

Hi,

What's the selector for the footer? I tried something like

#wrapper footer p {
color:#eb006a;
}

in the additional CSS, but to no avail.

Since the footer only gets generated on export, I can't use the webkit inspector to figure this out, and I don't see footer styling in the example styles.

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.