There are some cases where the highlighted CSS class creates overlapping text, for example on Rendering » Shader Nodes » Texture when highlighting “texture”. Screenshot:
I would suggest modifying the .highlighted class to replace inline-block with inline, remove the padding, and adding a box-shadow to create a border. In build/html/_static/css/theme_override.css, adding this to the bottom gives fairly similar results, without the overlapping problem, and it doesn’t add extra spacing when highlighting a portion of a word:
.rst-content .highlighted {
background: #F1C40F;
box-shadow: 0 0 0 3px #F1C40F;
display: inline;
padding: initial;
}
Note: I left out font-weight: bold since it didn’t need to be overridden. Also the background line could be removed, but it would make changing the color easier since it should match with the box-shadow color.
Tested in Firefox 69 and Chrome 76.
