Merge pull request #3 from ShiranAbir/feature/markdown-rendering

Feature/markdown rendering
ShiranAbir · Dec 21, 2022 · 50aa2e8 · 50aa2e8
2 parents f18d8a7 + 7a78722
commit 50aa2e8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chaty",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "description": "Chaty is an Electron bot that you can use to interact with ChatGPT",
   "author": "Shiran Abir",
@@ -18,6 +18,7 @@
     "make": "electron-forge make"
   },
   "dependencies": {
+    "@types/marked": "^4.0.8",
     "app-env": "^1.0.1",
     "axios": "^1.2.1",
     "bootstrap": "^5.2.3",
@@ -29,6 +30,8 @@
     "electron-squirrel-startup": "^1.0.0",
     "express": "^4.18.2",
     "google-tts-api": "^2.0.2",
+    "highlight.js": "^11.7.0",
+    "marked": "^4.2.4",
     "pump": "^3.0.0",
     "puppeteer": "^19.4.0",
     "puppeteer-extra-plugin-stealth": "^2.11.1",

diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -100,7 +100,11 @@
 
                 .text-container{
                     margin-left: 1.5rem;
-                    white-space: pre-wrap;
+
+                    p{
+                        white-space: pre-wrap;
+                        margin-bottom: 0.25rem;
+                    }
                 }
             }
         }

diff --git a/src/components/conversation.vue b/src/components/conversation.vue
@@ -3,7 +3,7 @@
     <div class="conversation-container">
       <div v-if="messages" class="messages-holder"> 
         <div v-for="message in messages" :key="message.id" class="message-holder" :class="{'question-holder': message.type === 'question', 'answer-holder': message.type === 'answer'}">
-          <div class="text-container">{{message.txt}}</div>
+          <div class="text-container" v-html="markdownToHtml(message.txt)"></div>
         </div>  
       </div>
     </div>
@@ -14,13 +14,25 @@
 </template>
 
 <script lang="ts">
+import { marked } from 'marked'
+
+import 'highlight.js/styles/stackoverflow-dark.css'
+import hljs from 'highlight.js'
 export default {
     data(){
         return{
             question: '',
             messages:[ {id:1, type: 'question', txt:'Try me :)'} ]
         }
     },
+    created(){
+      marked.setOptions({
+        highlight: function(code, lang) {
+          return hljs.highlightAuto(code).value
+        },
+        langPrefix: 'hljs language-',
+      })
+    },
     methods:{
       async onAskQuestion(){
         const question = this.question
@@ -42,6 +54,9 @@ export default {
             })
         })
         
+      },
+      markdownToHtml(txt:string):string{
+        return marked.parse(txt)
       }
     },
 }