Render video descriptions as markdown

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",

client/src/components/VideoResult.vue

@@ -14,7 +14,7 @@
         <a :title="watchVideoMessage" target="_blank" rel="nofollow noreferrer noopener" v-bind:href="video.url">{{ video.name }}</a>
       </h5>
 
-      <div class="description">{{ video.description }}</div>
+      <div class="description" v-html="renderMarkdown(video.description)"></div>
 
       <div class="metadatas">
         <div class="by-account">
@@ -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)
       }
     }
   })

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;
   }
 

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;
+}