Fix the styling of inline code that is within a link, so that the text in the inline code is visible while the link is being hovered. To allow for the code background and the link background to layer properly alongside the code text, I switched the background on inline code elements to being a pseudo-element, so I can layer it behind the background of the link.
Also, while I was here, I tweaked the alignment of the copy button in code blocks using Prism, as it looked rather off-center vertically in code blocks that had a single line of code.
What are the acceptance criteria?
Links on their own continue to look visually correct.
Inline code on its own continues to look visually correct.
Inline code with a variable inside continues to look visually correct.
Links with inline code inside continue to look visually correct.
Type of Change
What issue does this relate to?
N/A
What should this PR do?
Fix the styling of inline code that is within a link, so that the text in the inline code is visible while the link is being hovered. To allow for the code background and the link background to layer properly alongside the code text, I switched the background on inline code elements to being a pseudo-element, so I can layer it behind the background of the link.
Also, while I was here, I tweaked the alignment of the copy button in code blocks using Prism, as it looked rather off-center vertically in code blocks that had a single line of code.
What are the acceptance criteria?
Links on their own continue to look visually correct.
Inline code on its own continues to look visually correct.
Inline code with a variable inside continues to look visually correct.
Links with inline code inside continue to look visually correct.
Code blocks continue to look visually correct.