I’m trying to write custom styling for the codemirror show hint option in my angular application. When I try to edit the show-hint.css inside node_modules, it is reflecting. But I’m not able to do it inside my project. I tried to declare the ‘CodeMirror-hints’ and 'CodeMirror-hine CSS classes in my style file(I’m using scss), but it didn’t work. Can anyone help me out?
Thanks in advance
have you tried CodeMirror Styling Example ?
for me, it is easier than declaring in your own scss file.
like this -
export const defaultTheme = EditorView.theme({
'*': {
fontFamily: 'Nunito, sans-serif',
cursor: 'text',
},
'.cm-gutters': {
display: 'none',
},
'.cm-content': {
padding: '0 !important',
},
'.cm-line': {
height: '28px',
padding: '0 4px !important',
lineHeight: '26px',
verticalAlign: 'middle',
fontSize: '15px',
color: 'red',
},
'.cm-scroller': {
display: 'block',
},
'.cm-completionDetail': {
fontSize: '12px',
float: 'right',
},
'.cm-underline': {textDecoration: 'underline 3px red'},
'.cm-tooltip.cm-tooltip-autocomplete > ul': {
maxWidth: '500px',
minWidth: '200px',
},
});
const state = EditorState.create({
doc,
extensions: [
defaultTheme,
Thank you. I’ve one doubt here. Can this be use to syle Hint?
@froii The question is about CodeMirror 5, not 6.
Adding custom CSS to style these classes should just work. Just note that, if show-hint.css is loaded after your CSS, rules with the same specificity from the file loaded last will take precedence. Browser devtools allow you to see all rules that apply to an element when you inspect it, and are often an effective way to debug this kind of thing.
my bad, sorry. i was inattentive (
@marijn Thanks. I think it is the problem. ‘CodeMirror-hints’ style class specified in both the show-hint.css file(which is inside code mirror under node_modules) and my component’s scss file is loaded. But the first one is being used. Could you help to override the default CSS class?
Read up on CSS and rule precedence. That kind of thing is outside of the scope of the library forum.
Okay sure. Thanks for the support 
@marjin I think it is not related to Rule precedence. I’m trying to give a width property in my component’s style class
.CodeMirror-hints{
width: 150px !important;
}
This width property is not specified in the library’s show-hint.css file. So ideally it should apply this style, but it is not happening. I’m curious if I’m doing this the right way!
That class has a max-height property set. Maybe that’s what’s preventing your width from taking effect?
@marijn I don’t think so. When I gave the width property in library’s CSS class, it is working.
fyi,
this is how I’m implementing show-hint in my component
everything is working fine except custom styling