Format descriptions with marked library

package.json

@@ -52,6 +52,7 @@
     "localforage": "^1.7.3",
     "lodash": "^4.17.11",
     "lodash.debounce": "^4.0.8",
+    "marked": "^0.8.0",
     "moment": "^2.24.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

src/views/settings/components/Inputs.vue

@@ -77,7 +77,11 @@
     <prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
     <rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
     <!-------------------->
-    <p v-if="setting.type !== 'keyword'" :class="inputClass" class="expl">{{ setting.description }}</p>
+    <span
+      v-if="setting.description && setting.type !== 'keyword'"
+      :class="inputClass"
+      class="expl"
+      v-html="getFormattedDescription(setting.description)"/>
   </el-form-item>
 </template>
 
@@ -86,6 +90,7 @@ import i18n from '@/lang'
 import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput, MultipleSelect, ProxyUrlInput, PruneInput, RateLimitInput } from './inputComponents'
 import { processNested } from '@/store/modules/normalizers'
 import _ from 'lodash'
+import marked from 'marked'
 
 export default {
   name: 'Inputs',
@@ -203,6 +208,9 @@ export default {
         type === 'map' ||
         (Array.isArray(type) && type.includes('keyword') && type.findIndex(el => el.includes('list') && el.includes('string')) !== -1)
     },
+    getFormattedDescription(desc) {
+      return marked(desc)
+    },
     processNestedData(value, group, parentKey, parents) {
       const { valueForState,
         valueForUpdatedSettings,

src/views/settings/components/Setting.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="!loading">
     <el-form-item v-if="settingGroup.description" class="description-container">
-      <p class="description">{{ settingGroup.description }}</p>
+      <span class="description" v-html="getFormattedDescription(settingGroup.description)"/>
     </el-form-item>
     <div v-if="settingGroup.key === 'Pleroma.Emails.Mailer'">
       <div v-for="setting in settingGroup.children.filter(setting => !setting.group)" :key="setting.key">
@@ -65,6 +65,7 @@
 import Inputs from './Inputs'
 import i18n from '@/lang'
 import _ from 'lodash'
+import marked from 'marked'
 
 export default {
   name: 'Setting',
@@ -107,6 +108,9 @@ export default {
         type.includes('keyword') ||
         key === ':replace'
     },
+    getFormattedDescription(desc) {
+      return marked(desc)
+    },
     async removeSetting(key) {
       const config = this.settingGroup.key
         ? [{ group: this.settingGroup.group, key: this.settingGroup.key, delete: true, subkeys: [key] }]

yarn.lock

@@ -6348,6 +6348,11 @@ markdown-it@^8.4.0:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+marked@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.0.tgz#ec5c0c9b93878dc52dd54be8d0e524097bd81a99"
+  integrity sha512-MyUe+T/Pw4TZufHkzAfDj6HarCBWia2y27/bhuYkTaiUnfDYFnCP3KUN+9oM7Wi6JA2rymtVYbQu3spE0GCmxQ==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"