Website: Added Coy bug to the known failures page. (#2170)

PrismJS · Feb 18, 2020 · e9dab85 · e9dab85
1 parent 674f4b3
commit e9dab85
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/img/failures/coy-overlap.png b/img/failures/coy-overlap.png
diff --git a/index.html b/index.html
@@ -100,7 +100,7 @@ <h1>Full list of features</h1>
 		<li>Very easy to extend without modifying the code, due to Prism’s <a href="#plugins">plugin architecture</a>. Multiple hooks are scattered throughout the source.</li>
 		<li>Very easy to <a href="extending.html#language-definitions">define new languages</a>. Only thing you need is a good understanding of regular expressions</li>
 		<li>All styling is done through CSS, with <a href="faq.html#how-do-i-know-which-tokens-i-can-style-for">sensible class names</a> rather than ugly namespaced abbreviated nonsense.</li>
-		<li>Wide browser support: IE9+, Firefox, Chrome, Safari, <a href="faq.html#this-page-doesnt-work-in-opera">Opera</a>, most Mobile browsers</li>
+		<li>Wide browser support: IE11, Firefox, Chrome, Safari, <a href="faq.html#this-page-doesnt-work-in-opera">Opera</a>, most Mobile browsers</li>
 		<li>Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)</li>
 		<li>Highlights inline code as well, not just code blocks</li>
 		<li>Highlights nested languages (CSS in HTML, JavaScript in HTML)</li>
@@ -116,7 +116,8 @@ <h1>Limitations</h1>
 	<ul>
 		<li>Any pre-existing HTML in the code will be stripped off. <a href="faq.html#if-pre-existing-html-is-stripped-off-how-can-i-highlight">There are ways around it though</a>.</li>
 		<li>Regex-based so it *will* fail on certain edge cases, which are documented in the <a href="known-failures.html">known failues page</a>.</li>
-		<li>No IE 6-8 support. If someone can read code, they are probably in the 85% of the population with a modern browser.</li>
+		<li>Some of our themes have problems with certain layouts. Known cases are documented <a href="known-failures.html#themes">here</a>.</li>
+		<li>No IE 6-10 support. If someone can read code, they are probably in the 85% of the population with a modern browser.</li>
 	</ul>
 </section>
 

diff --git a/known-failures.html b/known-failures.html
@@ -24,7 +24,7 @@
 <script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
 <script src="https://www.google-analytics.com/ga.js" async></script>
 </head>
-<body>
+<body class="language-none">
 
 <header>
 	<div class="intro" data-src="templates/header-main.html" data-type="text/html"></div>
@@ -335,6 +335,29 @@ <h3>Nesting of bold and italic is not supported</h3>
 </section>
 
 
+<section>
+
+<h1 id="themes">Themes</h1>
+
+<p>Some of our themes are not compatible with certain layouts.</p>
+
+<h2>Coy</h2>
+
+<p>Coy's shadows and background might not wrap around the code correctly if combined with float of flexbox layouts.</p>
+
+<img src="img/failures/coy-overlap.png"/>
+
+<h3>Workarounds</h3>
+
+<p>There are 2 possible workarounds:</p>
+
+<p>The first workaround is setting <code>display: flex-root;</code> for the <code>pre</code> element. This will fix the issue but <code>flex-root</code> has <a href="https://caniuse.com/#feat=flow-root">limited browser support</a>.</p>
+
+<p>The second is adding <code>clear: both;</code> to the style of the <code>pre</code> element. This will fix the issue but it will change the way code blocks behave when overlapping with other elements.</p>
+
+</section>
+
+
 <footer data-src="templates/footer.html" data-type="text/html"></footer>
 
 <script src="scripts/utopia.js"></script>