Popup Dictionary & Syntax Highlighting for Code conflicting?

[benfaught]

Checklist

Please replace the space inside the brackets with an x if the following items apply:

• [ x ] I've verified that I use the latest version of the add-on by redownloading it from AnkiWeb
• [ x ] I've verified that I use the latest version of Anki by checking at https://apps.ankiweb.net#download
• [ x ] I've checked if anyone else asked this question before by looking through the issue reports.

Your question

Is it possible that Popup Dictionary & Syntax Highlighting for Code are conflicting when both are used at the same time? Possibly due to css using .highlight class?

I use the Syntax Highlighting for Code add-on with use css classes enabled.

• The highlighting of the clicked word for pop-up dictionary is showing a white text.
• if there is a code block to be displayed by the pop-up, it turns the whole block into a yellow highlight with white text.

Could this be due to the class .highlight being used in both add-ons? Just a guess on my part because of the way the .highlight class in code-blocks are affected. I use a pygments theme, that also uses the .highlight class for styling

photos below...

[benfaught]

I just fixed it.

I changed the css class in my pygments theme to div.highlight, and...

It worked 🙌

Example: (Not the whole theme listed here, but the css selector I changed to div.highlight)

 /* Dracula Theme v1.2.5
 *
 * https://github.com/zenorocha/dracula-theme
 *
 * Copyright 2016, All rights reserved
 *
 * Code licensed under the MIT license
 * http://zenorocha.mit-license.org
 *
 * @author Rob G <wowmotty@gmail.com>
 * @author Chris Bracco <chris@cbracco.me>
 * @author Zeno Rocha <hi@zenorocha.com>
 */

 .highlight .hll { background-color: #f1fa8c }
 div.highlight { 
  padding: 10px 20px 10px 20px; 
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  font-family: mycodefont
 }
 div.highlight  { background: #393950; color: #f8f8f2 }

pics below (everything looking great now)...