Debug Themes / CSS - Typora Support

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Debug Themes / CSS - Typora Support</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@typora" /> <meta name="twitter:title" content="Debug Themes / CSS" /> <meta name="twitter:url" content="/Debug-Themes/" /> <meta name="twitter:description" content="macOS For macOS ≥ 13.3 and Typora ≥ 1.9, you can debug Typora theme or CSS in following way: Enable Develop menu item in Safari — you must also have enabled Web Inspector in the Settings app under Safari > Advanced > Web Inspector. Learn more about enabling Web Inspector… Select Safari menu → Develop → [your device name] → Typora to open the DevTools. For older macOS, you can enable debug mode from Typora preferences panel → General, restart Typora and then right click on Typora writing area and select Inspect Element. Windows / Linux You could open DevTools..." /> <meta name="twitter:image:src" content="http://typora.io/img/twitter-sum.png" /> <meta name="twitter:image" content="http://typora.io/img/twitter-sum.png" /> <meta property="og:url" content="/Debug-Themes/" /> <meta property="og:title" content="Debug Themes / CSS" /> <meta property="og:description" content="macOS For macOS ≥ 13.3 and Typora ≥ 1.9, you can debug Typora theme or CSS in following way: Enable Develop menu item in Safari — you must also have enabled Web Inspector in the Settings app under Safari > Advanced > Web Inspector. Learn more about enabling Web Inspector… Select Safari menu → Develop → [your device name] → Typora to open the DevTools. For older macOS, you can enable debug mode from Typora preferences panel → General, restart Typora and then right click on Typora writing area and select Inspect Element. Windows / Linux You could open DevTools..." /> <meta name="og:image" content="http://typora.io/img/twitter-sum.png" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />  <link href="/assets/css/pure-min.css" rel="stylesheet" />  <link href="/assets/css/syntax.css" rel="stylesheet" /> <link href="/assets/css/typora-wiki.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" /> <script> if ( window.location.host.indexOf("typora.io") > -1 && window.location.protocol != "https:" ) { window.location.protocol = "https"; } if (location.host == "support.typora.com.cn") { location = `https://support.typoraio.cn${location.pathname}${location.hash}`; } </script> </head> <body> <style type="text/css"> body { font-family: "Merriweather", "PT Serif", Georgia, "Times New Roman", "STSong", Serif; font-weight: 300; min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6 { color: #2e2e2e; line-height: 1.15em; font-family: "Open Sans", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; text-rendering: geometricPrecision; } #pagecontainer { background-color: #fff; min-height: calc(100vh - 510px); flex: 2; } #post-content { padding-top: 36px; border-top: 1px dashed #999999; line-height: 1.6rem; padding-bottom: 100px; } #post-content > blockquote:first-child { padding-top: 0.4em; padding-bottom: 0.4em; margin-bottom: 2em; margin-left: 0; } .nav { border-bottom: none; height: auto; } .inner-page { width: 90%; max-width: 800px; margin: auto; } h1 { border-bottom: 0; } #header { padding-bottom: 32px; } #header h1 { text-align: center; white-space: pre-wrap; width: 90%; margin: 81px auto 48px auto; } h1 { font-size: 3.6rem; letter-spacing: -2px; text-indent: -3px; } h2 { margin-top: 2em; } .pure-menu-active > .pure-menu-link, .pure-menu-link:hover, .pure-menu-link:focus { background-color: initial; border: #777 solid 1px; } .post-meta { font-style: italic; text-align: center; color: #7a7a7a; } div.highlighter-rouge { padding: 8px; border: 1px #777 solid; line-height: 1.2rem; font-family: Menlo, Monaco, "Courier New", monospace; } div.highlighter-rouge pre { font-size: 0.95em; overflow: hidden; word-break: break-word; white-space: pre-wrap; } a { color: #463f5c; text-decoration: underline; } </style> <header class="pure-menu pure-menu-horizontal nav post-title" id="header"> <div class="gallery"> <ul class="pure-menu-list" style="float: left; margin-left: 1em; position: absolute" > <li class="pure-menu-item pure-menu-active"> <a href="/" class="pure-menu-link" id="title-bar-feature-btn" >Back</a > </li> </ul> </div> <h1>Debug Themes / CSS</h1> <section class="post-meta"> <time>May 15, 2024</time> by <span>typora.io</span> </section> </header> <div id="pagecontainer" class="container"> <div id="post-content" class="inner-page"><h2 id="macos">macOS</h2> <p>For macOS ≥ 13.3 and Typora ≥ 1.9, you can debug Typora theme or CSS in following way:</p> <ol> <li><strong>Enable Develop menu item in Safari</strong> — you must also have enabled Web Inspector in the Settings app under <strong>Safari</strong> > <strong>Advanced</strong> > <strong>Web Inspector</strong>. <a href="https://webkit.org/web-inspector/enabling-web-inspector/">Learn more about enabling Web Inspector…</a></li> <li>Select <strong>Safari</strong> menu → <strong>Develop</strong> → [your device name] → <strong>Typora</strong> to open the DevTools.</li> </ol> <p><img src="/media/debug-themes/Screenshot 2024-05-15 at 18.31.36.png" alt="Screenshot 2024-05-15 at 18.31.36" style="zoom:50%;" /></p> <p><img src="/media/debug-themes/Screenshot 2024-05-15 at 18.32.38.png" alt="Screenshot 2024-05-15 at 18.32.38" style="zoom:50%;" /></p> <p>For older macOS, you can enable debug mode from Typora preferences panel → General, restart Typora and then right click on Typora writing area and select <em>Inspect Element</em>.</p> <h2 id="windows--linux">Windows / Linux</h2> <p>You could open DevTools from <code class="language-plaintext highlighter-rouge">View</code> -> <code class="language-plaintext highlighter-rouge">Toggle DevTools</code> menu item.</p> </div> </div> <footer id="post-footer" style=" background-color: rgb(51, 51, 51); padding-top: 50px; padding-bottom: 50px; text-align: center; font-size: 13px; " > <a data-has-mirror href="https://store.typora.io">Get Typora</a> / <a href="https://github.com/typora/wiki-website" >Help Improve our documents</a > </footer> <script> var backBtn = document.querySelector("#title-bar-feature-btn"); if (backBtn) { backBtn.onclick = function (event) { if ( window.history.length > 1 && document.referrer.indexOf(window.location.host) !== -1 ) { console.log(" window.history.back"); event.preventDefault(); window.history.back(); } }; } if (location.host == "support.typoraio.cn" || location.host == "support.typora.com.cn") { document.querySelectorAll("[data-has-mirror]").forEach((a) => { var href = a.href; if (href.indexOf("store.typora.io") > 0) href = "https://typoraio.cn/"; else if (href.indexOf("https://typora.io") > -1) href = "https://typoraio.cn/"; else href = href.replace("typora.io", "typoraio.cn"); a.href = href; }); } </script> <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript" ></script> <script> (function (i, s, o, g, r, a, m) { i["GoogleAnalyticsObject"] = r; (i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments); }), (i[r].l = 1 * new Date()); (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]); a.async = 1; a.src = g; m.parentNode.insertBefore(a, m); })( window, document, "script", "https://www.google-analytics.com/analytics.js", "ga" ); ga("create", "UA-56771470-2", "auto"); ga("set", "page", "/support"); ga("send", "pageview"); </script>  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5ed23a5bcf8c017f" ></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", "jtsnyi1ioh"); </script>  </body> </html>

CINXE.COM

Debug Themes / CSS - Typora Support