Git Product home page Git Product logo

smyck-typora-theme's Introduction

Theme Toolkit

This toolkit contains a simple theme template, and sample .md file for testing and some HTML files for designers/developers to preview/debug css theme right inside their browser.

How to use

Copy and rename your .css theme file as html-preview/test.css and copy related resources, like images or fonts or imported css used by your css file into correspond folder. Then open .html files under folder html-preview/html by your browser to preview/debug your css theme.

HTML files

  • lorem.html Preview the basic typesetting.
  • outline-open-and-focus-mode.html Preview pinned outline panel on Typora for macOS, and focus mode.
  • source-mode.html Preview source code mode syntax highlighting style.
  • ui-controls.html Preview some control UIs on macOS, Windows, and Linux and window frame for "unibody" style on Windows.
  • ui-controls2.html Preview tips/notifications in Typora and the side panel style on Windows/Linux.
  • unibody.html Preview the menu style for "unibody" style on Windows.

So you may find components you never seen in Typora because they may only be available for specific OS platform. If you want to submit your Typora theme to Typora Theme Gallery, and share with other users, we strongly recommend you to go through all those HTML files to make your theme looks great n all platform.

Notice

  • This toolkit is created for Typora >= 0.9.9.7.8 (macOS) or Typora >= 0.9.19 (Windows/Linux). Update your Typora to latest version, and update this toolkit to latest version by git pull or other commands.
  • Do not edit/format HTML files, even though they are ugly and unreadable, currently the final rendered output is whitespace sensitive.
  • Better to use Chrome or Safari. (in macOS, typora use Safari as web engine, in Windows/Linux typora use Chrome, but their rendering results are almost same).
  • If you meet error like [Not allowed to load local resource: file://XXXX] in browser's console, the quickest solution for me is to use tools like httpster or CodeKit to host the web content into localhost.

Documentations

How to write a Typora theme

Typora Theme Gallery

Some Tips on Typora Styling

Issues && Contact

If you find bugs, or issues, or require some class for rendered HTML Dom in typora, please:

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.