Question

I’m implementing CodeMirror on a project and need to use it to syntax highlight both code blocks and inline code.

Here’s a sample I’ve put together to demonstrate what I’m trying to do: http://students.susanbuck.net/storage/code/code-mirror/

The syntax is working in both instances, but where I’m stuck is finding a way to kill the padding only on the .inline code elements so they don’t add excess space between the lines in the paragraph.

Answer 1

You want to target the .CodeMirror-lines divs that follow textarea.code.inline elements. This can be achieved using the following CSS selector:

textarea.code.inline + div.CodeMirror div.CodeMirror-lines {
    padding: 0px!important; /* added !important as padding is an inline stlye */
}

There is also a height value set in a child of div.CodeMirror-scroll that you might want to avoid. You can make this height redundent by using the following CSS:

textarea.code.inline + div.CodeMirror > div.CodeMirror-scroll { 
    max-height: 1em;
}