CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-07 15:25:52 +12:00
Code Issues Projects Releases Wiki Activity

Add custom styles for HRs, tables and link colors in rich text editor and preview

Browse source
This commit is contained in:
Andrew Kingston 2022-02-03 09:46:30 +00:00
parent 953fa94e2b
commit 1ec51d2562
1 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -98,22 +98,39 @@
background: var(--spectrum-global-color-gray-100); background: var(--spectrum-global-color-gray-100);
} }
/* Code blocks in preview */ /* Code blocks in preview */
:global(.EasyMDEContainer .editor-preview pre) { :global(.EasyMDEContainer pre) {
background: var(--spectrum-global-color-gray-100); background: var(--spectrum-global-color-gray-100);
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
} }
:global(.EasyMDEContainer .editor-preview code) { :global(.EasyMDEContainer code) {
color: #e83e8c; color: #e83e8c;
} }
:global(.EasyMDEContainer .editor-preview pre code) { :global(.EasyMDEContainer pre code) {
color: var(--spectrum-alias-text-color); color: var(--spectrum-alias-text-color);
} }
/* Block quotes */ /* Block quotes */
:global(.EasyMDEContainer .editor-preview blockquote) { :global(.EasyMDEContainer blockquote) {
border-left: 4px solid var(--spectrum-global-color-gray-400); border-left: 4px solid var(--spectrum-global-color-gray-400);
color: var(--spectrum-global-color-gray-700); color: var(--spectrum-global-color-gray-700);
margin-left: 0; margin-left: 0;
padding-left: 20px; padding-left: 20px;
} }
/* HR's */
:global(.EasyMDEContainer hr) {
background-color: var(--spectrum-global-color-gray-300);
border: none;
height: 2px;
}
/* Tables */
:global(.EasyMDEContainer td, .EasyMDEContainer th) {
border-color: var(--spectrum-alias-border-color) !important;
}
/* Links */
:global(.EasyMDEContainer a) {
color: var(--primaryColor);
}
:global(.EasyMDEContainer a:hover) {
color: var(--primaryColorHover);
}
</style> </style>