-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added custom markdown css #1996
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ZeroX-DG
Please confirm my review!
{i18n.__('Custom CSS')} | ||
</div> | ||
<div styleName='group-section-control'> | ||
<ReactCodeMirror onChange={e => this.handleUIChange(e)} ref={e => (this.customCSSCM = e)} value={config.preview.customCSS} options={{ lineNumbers: true, mode: 'css', theme: codemirrorTheme }} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This ReactCodeMirror
is too huge...
Set the width of this according to the editor.
@sosukesuzuki I have changed my code, please have a look 😃 |
Suggest define Custom CSS as multiple theme, and user can associate different notes with different CSS themes. |
With this feature, users can now customize how the markdown should look like. More info: https://issuehunt.io/repos/53266139/issues/184
Here is how it looks
As you can see, the user can choose to use custom css or not by clicking on the allow custom css checkbox in the preview section and then specify the custom css in the code editor bellow.
By default the custom css is disabled.
If the user export the note as html, their custom style will be applied too.