Repository navigation
Removing line-numbers class from a code-input element or its ancestor doesn't visibly remove the line numbers #237
Description
Steps To Reproduce:
<!DOCTYPE html>
<html>
<body>
<!--For convenience, this demo uses files from JSDelivr CDN; for more privacy and security download and host them yourself.-->
<!--Prism+code-input-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js" data-manual></script><!--Remove data-manual if also using Prism normally-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css"></link>
<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/code-input.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/code-input.min.css">
<!--Import-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/plugins/prism-line-numbers.min.css"/>
<script>
codeInput.registerTemplate("syntax-highlighted", new codeInput.templates.Prism(Prism, [
// CSS only - don't pass here
]));
</script>
<p>The lines are numbered! <button onclick="document.querySelector('code-input').classList.toggle('line-numbers')">Toggle Line Numbers</button></p>
<code-input class="line-numbers" language="markdown"><textarea data-code-input-fallback># Hickory dickory dock
Hickory dickory dock.
The mouse ran up the clock.
The clock struck one,
The mouse ran down,
Hickory dickory dock.</textarea></code-input>
</body>
</html>- Click the "Toggle Line Numbers" button once.
Also test with the line-numbers class in a ancestor of the code-input element.
Expected result:
- The left-padding of the code-input element decreases.
- The line numbers disappear.
Actual result:
- The left-padding of the code-input element decreases.
- The line numbers remain visible.
Workaround / Suggested Fix
CSS:
code-input:not(.line-numbers, .line-numbers code-input) .line-numbers-rows {
display: none;
}
Activity
[-]Removing[/-][+]Removing line-numbers class from a code-input element or its ancestor doesn't visibly remove the line numbers[/+](TODO: Test) Fix no-line-numbers Prism case for wrap plugin; Fix #237:…
Add automated tests for prism-line-numbers including #237
Add automated tests for prism-line-numbers including #237