Replace markdown-it with MyST

Author: wxtim

package.json

@@ -38,8 +38,8 @@
     "graphql": "16.10.0",
     "graphql-tag": "2.12.6",
     "lodash-es": "4.17.21",
-    "markdown-it": "14.1.0",
     "mitt": "3.0.1",
+    "mystjs": "^0.0.15",
     "nprogress": "1.0.0-1",
     "preact": "10.26.5",
     "simple-icons": "2.19.0",

src/components/Markdown.vue

@@ -24,9 +24,9 @@
 </template>
 
 <script>
-import MarkdownIt from 'markdown-it'
+import { MyST } from 'mystjs'
 
-const md = new MarkdownIt()
+const md = new MyST()
 
 export default {
   name: 'Markdown',

src/components/cylc/Info.vue

@@ -58,7 +58,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <dd>{{ taskMetadata.title }}</dd>
             <v-divider />
             <dt>Description</dt>
-            <dd><span class="markup">{{ taskMetadata.description }}</span></dd>
+            <dd><Markdown :markdown="taskMetadata.description"/></dd>
             <v-divider />
             <dt>URL</dt>
             <dd>
@@ -168,12 +168,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { useJobTheme } from '@/composables/localStorage'
 import GraphNode from '@/components/cylc/GraphNode.vue'
+import Markdown from '@/components/Markdown.vue'
 import { formatCompletion } from '@/utils/outputs'
 
 export default {
   name: 'InfoComponent',
 
   components: {
+    Markdown,
     GraphNode,
   },