Markdown solemn return

package.json

@@ -20,7 +20,9 @@
     "check": "vue-tsc && pnpm run lint && pnpm run prettier && pnpm run stylelint"
   },
   "dependencies": {
+    "@types/markdown-it": "^14.0.0",
     "axios": "^1.6.7",
+    "markdown-it": "^14.1.0",
     "pinia": "^2.1.7",
     "query-string": "^9.0.0",
     "ua-parser-js": "^1.0.37",

src/components/MarkdownRenderer.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import Markdown from 'markdown-it';
+
+const props = withDefaults(defineProps<{ text: string }>(), { text: '' });
+const markdown = new Markdown({
+	breaks: true,
+	linkify: true,
+	quotes: '«»„“',
+});
+</script>
+
+<template>
+	<!-- eslint-disable vue/no-v-html -->
+	<div class="md" v-html="markdown.render(props.text)" />
+	<!-- eslint-enable -->
+</template>
+
+<style scoped>
+.md >>> h1 {
+	margin-top: 0.67em;
+	margin-bottom: 4px;
+}
+
+.md >>> h2 {
+	margin-top: 0.83em;
+	margin-bottom: 4px;
+}
+
+.md >>> h3 {
+	margin-top: 1em;
+	margin-bottom: 4px;
+}
+
+.md >>> h4 {
+	margin-top: 1.33em;
+	margin-bottom: 4px;
+}
+
+.md >>> h5 {
+	margin-top: 1.67em;
+	margin-bottom: 4px;
+}
+
+.md >>> h6 {
+	margin-top: 2.33em;
+	margin-bottom: 4px;
+}
+
+.md >>> ul ul,
+.md >>> ol ul,
+.md >>> ol ol,
+.md >>> ul ol {
+	margin-left: 15px;
+}
+
+.md >>> a {
+	color: #1a0dab;
+	text-decoration: none;
+}
+
+.md >>> a:hover {
+	text-decoration: underline;
+}
+</style>

src/views/timetable/lecturer/AsyncLecturerInfo.vue

@@ -3,6 +3,7 @@ import Placeholder from '@/assets/profile_image_placeholder.webp';
 import { computed } from 'vue';
 import { TimetableApi } from '@/api';
 import { useTimetableStore } from '@/store/timetable';
+import Markdown from '@/components/MarkdownRenderer.vue';
 
 const timetableStore = useTimetableStore();
 
@@ -34,9 +35,7 @@ const imgUrl = computed(() =>
 <template>
 	<img :src="imgUrl" alt="Фотография преподавателя" class="avatar" width="256" height="256" />
 	<h2 class="full-name">{{ fullName }}</h2>
-	<p>
-		{{ lecturer?.description }}
-	</p>
+	<Markdown class="description" :text="lecturer?.description ?? ''" />
 </template>
 
 <style scoped>