Coder Social home page Coder Social logo

iamzenninja / asciidoctor-skins Goto Github PK

View Code? Open in Web Editor NEW

This project forked from darshandsoni/asciidoctor-skins

0.0 1.0 0.0 2.4 MB

Control how your asciidoctor powered documentation looks

Home Page: https://darshandsoni.com/asciidoctor-skins

License: MIT License

HTML 10.57% CSS 85.48% JavaScript 3.96%

asciidoctor-skins's Introduction

asciidoctor-skins: CSS stylesheets for asciidoctor

Markdown is superbly simple. Perfect for writing quick notes and pages with a basic structure. Asciidoctor is superbly sophisticated. Where markdown fails, asciidoc/asciidoctor allows you to document things with ease, fine grain control and a civilised demeanor, worlds away from hair wrenching word processors.

Asciidoctor comes with a very clean default stylesheet that saves users from spending time formatting their documents. This repository is for users who would like some other style choices, without having to rewrite stylesheets from scratch. All stylesheets in here pull in asciidoctor's defaults first and then apply custom styles to a few elements.

Usage

  1. If you have no idea what asciidoctor is, check out their fabulous project here.

  2. Once you've got an .adoc document going, download the asciidoctor.css and a css skin file of your choice into your project directory.

  3. In your adoc file, add the following line: :stylesheet: Your_Chosen_Stylesheet.css

  4. Render your html file by running asciidoctor sample.adoc

  5. Et voilà! Your beautiful web page based document is rendered.

Demo

You can preview all of the stylesheets in the online demo.

To change the displayed stylesheet, just add the name of the CSS file after a ? character at the end of the URL. For example, to preview the material stylsheet, just add ?material.

Custom preview

You can now add a JS switcher to any document to quickly preview the contents rendered with any of the available asciidoctor skins. Just add the following line to the <body> section of any asciidoctor-generated HTML page:

    <script src="https://darshandsoni.com/asciidoctor-skins/switcher.js" type="text/javascript"></script>

Skins

Note: To preview all of them, visit the screenshots page.

Available stylesheets:

Contribution

The purpose of this project is to allow asciidoc/asciidoctor users greater flexibility when it comes to customising the look and feel of their documentation. Apart from the available stylesheets, you are welcome to build your own. If you think the world could use it, submit a pull request and it will be featured too! You can either edit template.css (which has most elements listed), or create your own stylesheets from scratch.

Licence Agreement

By contributing changes to this repository, you agree to license your contributions under the MIT license. This ensures your contributions have the same license as the project and that the community is free to use your contributions. You also assert that you are the original author of the work that you are contributing unless otherwise stated.

Credits

License

MIT.

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.