MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add custom styles for code blocks and block quotes in rich text editor and preview

This commit is contained in:
Andrew Kingston 2022-02-03 09:32:01 +00:00
parent e8f8d6ead9
commit f347bafe62
2 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bbui/src/Markdown/MarkdownViewer.svelte
View File

@ -64,4 +64,8 @@
.markdown-viewer :global(.editor-preview-full > :last-child) { .markdown-viewer :global(.editor-preview-full > :last-child) {
margin-bottom: 0; margin-bottom: 0;
} }
/* Code blocks in preview */
.markdown-viewer :global(.editor-preview-full pre) {
background: var(--spectrum-global-color-gray-200);
}
</style> </style>

25
packages/bbui/src/Markdown/SpectrumMDE.svelte
View File

@ -71,7 +71,7 @@
} }
/* Text selections */ /* Text selections */
:global(.EasyMDEContainer .CodeMirror-selectedtext) { :global(.EasyMDEContainer .CodeMirror-selectedtext) {
background: var(--spectrum-global-color-gray-400); background: var(--spectrum-global-color-gray-400) !important;
} }
/* Background of lines containing selected text */ /* Background of lines containing selected text */
:global(.EasyMDEContainer .CodeMirror-selected) { :global(.EasyMDEContainer .CodeMirror-selected) {
@ -93,4 +93,27 @@
:global(.EasyMDEContainer .editor-preview) { :global(.EasyMDEContainer .editor-preview) {
border: 1px solid var(--spectrum-alias-border-color); border: 1px solid var(--spectrum-alias-border-color);
} }
/* Code blocks in editor */
:global(.EasyMDEContainer .cm-s-easymde .cm-comment) {
background: var(--spectrum-global-color-gray-100);
}
/* Code blocks in preview */
:global(.EasyMDEContainer .editor-preview pre) {
background: var(--spectrum-global-color-gray-100);
padding: 4px;
border-radius: 4px;
}
:global(.EasyMDEContainer .editor-preview code) {
color: #e83e8c;
}
:global(.EasyMDEContainer .editor-preview pre code) {
color: var(--spectrum-alias-text-color);
}
/* Block quotes */
:global(.EasyMDEContainer .editor-preview blockquote) {
border-left: 4px solid var(--spectrum-global-color-gray-400);
color: var(--spectrum-global-color-gray-700);
margin-left: 0;
padding-left: 20px;
}
</style> </style>