HTML5 Shiv Comments + External Embeds
panoply opened this issue · 0 comments
Description
The markup lexer has trouble processing HTML5 Shiv comments (ie: Conditional Comments) when an external embedded language region is preceded. This is a defect that was partially inherited from PrettyDiff and partly introduced in the comment beautification overhaul for Prettify.
Context
The defect affects HTML and Liquid (markup languages) and it caused from the data structure tokens and multiline indentation logic employed to handle HTML comment formatting. The issue will only occur when an embedded language follows the shiv. The internal indentLevel
needs re-thinking.
Re-creation
As aforementioned, the defect only occurs when an embedded (external) language region precedes it. AFAIK this below structure is the only way to recreate the defect. In the below code example, the conditional comment:
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
Is immediately followed by a <style>
embedded language code block. This is where the defect wreaks it havoc. The resulting beautification result will output misaligned indentation levels for all code following the shiv conditional comment, for example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page title</title>
<link rel="stylesheet" href="style.css">
<!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<style>
html {
font-family: sans-serif;
}
form {
background: #eee;
border-radius: 20px;
box-shadow: 1px 1px 1px black;
padding: 20px;
width: 330px;
}
</style>
</head>
<body>
</body>
</html>
Workaround
This is post pre-release fix. A temporary workaround is to either not use shiv conditional comments or do not place an external code region directly after.