diff --git a/client/package.json b/client/package.json index 89c189b..5df5abe 100644 --- a/client/package.json +++ b/client/package.json @@ -14,7 +14,9 @@ "@types/axios": "^0.14.0", "@vue/cli-plugin-typescript": "^4.5.4", "@vue/cli-service": "^4.0.5", + "@types/markdown-it": "^10.0.1", "axios": "^0.20.0", + "markdown-it": "^11.0.0", "node-sass": "^4.13.0", "nprogress": "^0.2.0", "register-service-worker": "^1.0.0", diff --git a/client/src/components/VideoResult.vue b/client/src/components/VideoResult.vue index 20bfc2c..f76cb39 100644 --- a/client/src/components/VideoResult.vue +++ b/client/src/components/VideoResult.vue @@ -14,7 +14,7 @@ {{ video.name }} -
{{ video.description }}
+
@@ -109,6 +109,7 @@ import ActorMiniature from './ActorMiniature.vue' import { Video } from '../../../PeerTube/shared/models' import { durationToString } from '../shared/utils' + import { renderMarkdown } from '../shared/markdown-render' export default Vue.extend({ components: { @@ -150,6 +151,9 @@ } return this.video.previewUrl + }, + renderMarkdown(markdown: string) { + return renderMarkdown(markdown) } } }) diff --git a/client/src/scss/main.scss b/client/src/scss/main.scss index 1dbe123..6579968 100644 --- a/client/src/scss/main.scss +++ b/client/src/scss/main.scss @@ -163,6 +163,8 @@ body { .description { margin: 10px 0 20px 0; + border-left: 1px solid; + padding-left: 1em; word-break: break-word; } diff --git a/client/src/shared/markdown-render.ts b/client/src/shared/markdown-render.ts new file mode 100644 index 0000000..8b9b64c --- /dev/null +++ b/client/src/shared/markdown-render.ts @@ -0,0 +1,21 @@ +import * as MarkdownIt from 'markdown-it' + +const TEXT_RULES = [ + 'linkify', + 'autolink', + 'emphasis', + 'link', + 'newline', + 'list' +] + +const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true, html: false }) + +for (const rule of TEXT_RULES) { + markdownIt.enable(rule) +} + +export function renderMarkdown(markdown: string) { + let html = markdownIt.render(markdown); + return html; +}