-
-
Notifications
You must be signed in to change notification settings - Fork 187
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add markdown support for script/category names
Add markdown rendering for script and category titles to improve the presentation of textual content. - Introduce reusable `MarkdownText` for markdown rendering. - Incorporate markdown styling into dedicated SCSS file for clarity. - Define explicit font sizes for consistent visual experience. - Apply `MarkdownText` usage across UI for unified markdown rendering. - Streamline related styles and layout for improved maintainability - Set font sizes explicitly for better consistency and to avoid unexpected inheritence. This enhancement enables richer text formatting and improves the user interface's flexibility in displaying content.
- Loading branch information
1 parent
6ab6dac
commit a5ffed4
Showing
10 changed files
with
259 additions
and
183 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
50 changes: 50 additions & 0 deletions
50
src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
<template> | ||
<!-- eslint-disable vue/no-v-html --> | ||
<div | ||
class="markdown-text" | ||
@click.stop | ||
v-html="htmlOutput" | ||
/> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent, computed } from 'vue'; | ||
import { createMarkdownRenderer } from './MarkdownRenderer'; | ||
export default defineComponent({ | ||
props: { | ||
text: { | ||
type: String, | ||
required: true, | ||
}, | ||
}, | ||
setup(props) { | ||
const htmlOutput = computed<string>(() => convertMarkdownToHtml(props.text)); | ||
return { | ||
htmlOutput, | ||
}; | ||
}, | ||
}); | ||
const renderer = createMarkdownRenderer(); | ||
function convertMarkdownToHtml(markdownText: string): string { | ||
return renderer.render(markdownText); | ||
} | ||
</script> | ||
|
||
<style lang="scss"> /* Not scoped due to element styling such as "a". */ | ||
@use "@/presentation/assets/styles/main" as *; | ||
@import './markdown-styles.scss'; | ||
$text-color: $color-on-primary; | ||
$text-size: 0.75em; // Lower looks bad on Firefox | ||
.markdown-text { | ||
color: $text-color; | ||
font-size: $text-size; | ||
font-family: $font-main; | ||
@include markdown-text-styles($text-size: $text-size); | ||
} | ||
</style> |
Oops, something went wrong.