CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-01 09:38:55 +13:00
Code Issues Projects Releases Wiki Activity

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

Browse source
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) {
margin-bottom: 0;
}
/* Code blocks in preview */
.markdown-viewer :global(.editor-preview-full pre) {
background: var(--spectrum-global-color-gray-200);
}
</style>

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

@ -71,7 +71,7 @@
}
/* Text selections */
: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 */
:global(.EasyMDEContainer .CodeMirror-selected) {
@ -93,4 +93,27 @@
:global(.EasyMDEContainer .editor-preview) {
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>