Theme Documents

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Theme Documents — Typora</title> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="/assets/css/github.css" rel="stylesheet" /> <link href="/assets/css/pure-min.css" rel="stylesheet" />  <link href="/assets/css/syntax.css" rel="stylesheet" /> <link href="/assets/css/typora-theme.css" rel="stylesheet" /> <link rel='icon' href='/assets/img/favicon-16.png' sizes='16x16'> <link rel='icon' href='/assets/img/favicon-32.png' sizes='32x32'> <link rel='icon' href='/assets/img/favicon-64.png' sizes='64x64'> <link rel='icon' href='/assets/img/favicon-128.png' sizes='128x128'> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@typora" /> <meta name="twitter:title" content="Theme Gallery for Typora" /> <meta name="twitter:description" content="Download or share your Typora Themes." /> <meta name="twitter:image" content="/img/twitter-sum.png" /> <script> if (window.location.protocol != "https:" && window.location.host.indexOf(":4000") == -1){ window.location.protocol = "https"; } </script> </head> <body> <header class="pure-menu pure-menu-horizontal nav" id="header"> <div class="gallery"> <div class="product-name">Typora</div> <ul class="pure-menu-list"> <li class="pure-menu-item"> <a href="https://typora.io" class="pure-menu-link">Home</a> </li> <li class='pure-menu-item '> <a href="/" class="pure-menu-link">Themes</a> </li> <li class='pure-menu-item pure-menu-active '> <a href="/doc" class="pure-menu-link"> Documents </a> </li> </ul> </div> </header> <div id="pagecontainer" class="container"> <div class="widebanner row"> <div class="span12"> <div class="banner72" id="banner72"> <script type="text/javascript"> </script> </div> </div> </div> <div id="content"> <style type="text/css"> .doc-wrapper { width: 100%; padding-right: 2rem; padding-left: 2rem; margin-right: auto; margin-left: auto; padding-bottom: 4rem; } .doc { margin-right: auto; margin-left: auto; width: 600px; /*box-shadow: 0 4px 9px rgba(0,0,0,0.3); background-color: #f6f6f6;*/ min-height: 300px; padding: 1rem; } .doc h2 { text-align: center; font-weight: normal; border-bottom: 0; font-family: 'Merriweather','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif; color: #445588; } #content { background-color: white; } .nav { border-bottom: 1px dashed #999999; } a.more-content { text-align: center; color: #445588; font-size: 0.9em; display: block; padding: 4px; background-color: #eee; } a { cursor: pointer; } .doc ul { list-style-type: none; } .doc ul li { position: relative; } .doc ul li:before { content: "+"; display: inline-block; position: absolute; color: #008080; left: -16px; } footer { display: none; } </style> <div class="doc-wrapper"> <div class="doc"> <h2># How to install a theme</h2> <article> <ul> <li><p>Download theme from this website or other place.</p></li> <li><p>Open typora. Click the "Open Theme Folder" button in the `Preference Panel` → `Appearance` section.</p></li> <li><p>Put downloaded content into the opened folder. Make sure your css files are directly under that directory.</p></li> </ul> </article> <a class='more-content' href="/doc/Install-Theme/">Read More...</a> </div> </div> <div class="doc-wrapper"> <div class="doc"> <h2># How to write a theme</h2> <article> <ul> <li><p>Write custom CSS styles for h1, p, blockquote, etc.</p></li> <li><p>Download the <a href="https://github.com/typora/typora-theme-toolkit">toolkit</a>. Copy content into `test.css` from the toolkit folder, and check rendered HTML in browser.</p></li> <li><p>Name your css using use lowercase and "-" (no capitalized characters or whitespace), eg: my-typora-theme.css.</p></li> <li><p>Follow instructions for "install theme", and test in typora.</p></li> </ul> </article> <a class='more-content' href="/doc/Write-Custom-Theme/">Read More...</a> </div> </div> <div class="doc-wrapper"> <div class="doc"> <h2># How to submit a theme</h2> <article> <ul> <li><p>Fork <a href="https://github.com/typora/typora-theme-gallery" target="_blank">this site</a> on GitHub</p></li> <li><p>Create a new post in the `_posts` directory and fill out the relevant YAML fields</p></li> <li><p>Make a 250x200 thumbnail and drop it in the `thumbnails` directory. List its filename in the post's markdown file.</p></li> <li><p>Test it out (also test your theme), then push your changes up and open a pull request.</p></li> </ul> </article> <a class='more-content' href="/doc/Submit-A-Theme/">Read More...</a> </div> </div> <div class="doc-wrapper"> <div class="doc"> <h2># More Tips & Docs on Styles</h2> <article> <ul> <li><p><a target="_blank" href="https://support.typora.io/Add-Custom-CSS/">Add Custom CSS</a></p></li> <li><p><a target="_blank" hre="https://support.typora.io/Custom-Font/">Custom Font</a></p></li> <li><p><a target="_blank" href="https://support.typora.io/Code-Block-Styles/">Change Code Block Styles</a></p></li> <li><p>See "Read More.." for more documentations.</p></li> </ul> </article> <a class='more-content' href="https://support.typora.io/style" target="_blank">Read More...</a> </div> </div> <div class="doc-wrapper"> <div class="doc"> <h2># About this Site</h2> <article> <ul> <li><p>Hosted on <a href="https://github.com/typora/typora-theme-gallery" target="_blank">GitHub</a>.</p></li> <li><p>Forked from <a href="https://github.com/mattvh/jekyllthemes" target="_blank">jekyllthemes</a> and <a href="https://github.com/typora/wiki-website">typora-wiki</a>.</p></li> <li><p>Contact to <a href="/cdn-cgi/l/email-protection#98f0f1d8ece1e8f7eaf9b6f1f7"><span class="__cf_email__" data-cfemail="8ee6e7cefaf7fee1fcefa0e7e1">[email protected]</span></a>.</p></li> </ul> </article> <a class='more-content' target="_blank" href="https://github.com/typora/typora-theme-gallery" >Fork Me on GitHub</a> </div> </div> </div> </div> <style type="text/css"> #post-footer a { color: #445588; } </style> <footer id="post-footer" style="color: rgb(51, 51, 51); padding-top:50px; padding-bottom:50px; text-align:center;font-size:13px;"> How to <a href="/doc/Install-Theme/">install</a> / <a href="/doc/Write-Custom-Theme/">write</a> / <a href="/doc/Submit-A-Theme/">submit</a> a theme </footer> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "jtsmqoysmf"); </script> </body> </html>

CINXE.COM

Theme Documents — Typora