This pull request resolves the issue of the code element not assuming the full width of its parent element (pre), thereby causing the highlighting span elements (children of the code element) not to span the entire length of the code they are highlighting.
The issue occurred because the code element is an inline property, which means it flows with surrounding text. However, by setting the display property to inline-block, we can change the display behavior of the element to behave like a block-level element, allowing us to set the width and height properties.
To ensure that the code element assumes the width of its parent container, we explicitly set the min-width property to 100%. This allows the code element to expand to the full available width of its parent element (pre), resorting to the code highlighter spanning the entire line of code where it is applied
I have included screenshots of before and after the fix on both desktop and mobile views below.
Screenshots
Before Fix: Desktop View
After Fix: Desktop View
After Fix: Mobile View
Pull Request Reference
This pull request is based on issue from this pull request #33.
Description
This pull request resolves the issue of the
codeelement not assuming the full width of its parent element (pre), thereby causing the highlightingspanelements (children of thecodeelement) not to span the entire length of the code they are highlighting.The issue occurred because the
codeelement is an inline property, which means it flows with surrounding text. However, by setting the display property to inline-block, we can change the display behavior of the element to behave like a block-level element, allowing us to set the width and height properties.To ensure that the code element assumes the width of its parent container, we explicitly set the min-width property to 100%. This allows the
codeelement to expand to the full available width of its parent element (pre), resorting to the code highlighter spanning the entire line of code where it is appliedI have included screenshots of before and after the fix on both desktop and mobile views below.
Screenshots
Before Fix: Desktop View
After Fix: Desktop View
After Fix: Mobile View
Pull Request Reference
This pull request is based on issue from this pull request #33.