diff --git a/src/components/MarkdownContent.vue b/src/components/MarkdownContent.vue index c761d3ce..161348c4 100644 --- a/src/components/MarkdownContent.vue +++ b/src/components/MarkdownContent.vue @@ -34,7 +34,7 @@ watch(() => props.content, (content: string): void => { @import "../assets/mixins"; // Computed component variables -$header-anchor-offset-top: calc(var(--kui-space-50, $kui-space-50) + 2px); +$header-anchor-offset-top: calc(var(--kui-space-80, $kui-space-80) + 2px); // Markdown Preview content styles .markdown-content { @@ -61,7 +61,7 @@ $header-anchor-offset-top: calc(var(--kui-space-50, $kui-space-50) + 2px); // Exclude the h1 header h2, h3, h4, h5, h6 { margin-top: calc(var(--kui-space-20, $kui-space-20) * -1); - padding-top: var(--kui-space-50, $kui-space-50); + padding-top: var(--kui-space-80, $kui-space-80); position: relative; a.header-anchor { @@ -112,6 +112,7 @@ $header-anchor-offset-top: calc(var(--kui-space-50, $kui-space-50) + 2px); p code { background: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker); border-radius: var(--kui-border-radius-20, $kui-border-radius-20); + color: $kui-color-text; font-size: var(--kui-font-size-30, $kui-font-size-30); padding: var(--kui-space-10, $kui-space-10) var(--kui-space-20, $kui-space-20); white-space: break-spaces; @@ -152,6 +153,39 @@ $header-anchor-offset-top: calc(var(--kui-space-50, $kui-space-50) + 2px); max-width: 100%; } + .markdown-ui-table-wrapper { + max-width: 100%; + overflow-x: auto; + width: 100%; + } + + table { + border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border); + border-collapse: collapse; + border-spacing: 0; + color: var(--kui-color-text, $kui-color-text); + font-size: var(--kui-font-size-30, $kui-font-size-30); + + thead th { + background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker); + border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border-neutral-weaker, $kui-color-border-neutral-weaker); + font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold); + padding: var(--kui-space-40, $kui-space-40); + vertical-align: text-top; + white-space: nowrap; + + &:not(:last-of-type) { + border-right-color: var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak); + } + } + + tbody td { + border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border); + padding: var(--kui-space-40, $kui-space-40); + vertical-align: text-top; + } + } + // mermaid charts .mermaid { svg { diff --git a/src/composables/useMarkdownIt.ts b/src/composables/useMarkdownIt.ts index 8c013484..4db7f51e 100644 --- a/src/composables/useMarkdownIt.ts +++ b/src/composables/useMarkdownIt.ts @@ -71,7 +71,8 @@ export default function useMarkdownIt(theme: 'light' | 'dark' = 'light') { md.value.linkify.set({ fuzzyLink: false }) // Customize table element - md.value.renderer.rules.table_open = () => '' + NEW_LINE_CHARACTER + md.value.renderer.rules.table_open = () => '
' + NEW_LINE_CHARACTER + md.value.renderer.rules.table_close = () => '
' + NEW_LINE_CHARACTER const getDefaultRenderer = (original: any): Function => { return original || function(tokens: Record[], idx: number, options: Record, env: any, self: Record) { diff --git a/src/constants.ts b/src/constants.ts index f7899db2..eaf24ee0 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -28,7 +28,7 @@ NEW_LINE_CHARACTER + /** The markdown template for a table */ export const MARKDOWN_TEMPLATE_TABLE = -'| Column1 | Column2 | Column3 |' + NEW_LINE_CHARACTER + +'| Column 1 | Column 2 | Column 3 |' + NEW_LINE_CHARACTER + '| :--- | :--- | :--- |' + NEW_LINE_CHARACTER + '| Content | Content | Content |'