3 files changed, 17 insertions, 2 deletions
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index feb815e5..1d9412fc 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -3,7 +3,7 @@ import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
 import { UserOperation, Community, Post as PostI, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentLikeForm, CreateCommentLikeResponse, CommentSortType } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import { msgOp, hotRank } from '../utils';
+import { msgOp, hotRank,mdToHtml } from '../utils';
 import { MomentTime } from './moment-time';
 
 interface CommentNodeI {
@@ -304,7 +304,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           {this.state.showEdit && <CommentForm node={node} edit onReplyCancel={this.handleReplyCancel} />}
           {!this.state.showEdit &&
             <div>
-              <p className='mb-0'>{node.comment.content}</p>
+              <div className="md-div" dangerouslySetInnerHTML={mdToHtml(node.comment.content)} />
               <ul class="list-inline mb-1 text-muted small font-weight-bold">
                 <li className="list-inline-item">
                   <span class="pointer" onClick={linkEvent(this, this.handleReplyClick)}>reply</span>
diff --git a/ui/src/main.css b/ui/src/main.css
index 089a53b8..3e0dd44a 100644
--- a/ui/src/main.css
+++ b/ui/src/main.css
@@ -23,3 +23,7 @@ body {
   color: #fff;
   background-color: var(--secondary);
 }
+
+.md-div p {
+  margin-bottom: 0px;
+}
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 1d490a30..64c82682 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -1,4 +1,5 @@
 import { UserOperation, Comment } from './interfaces';
+import * as markdown_it from 'markdown-it';
 
 export let repoUrl = 'https://github.com/dessalines/rust-reddit-fediverse';
 export let wsUri = (window.location.protocol=='https:'&&'wss://'||'ws://')+window.location.host + '/service/ws/';
@@ -8,6 +9,12 @@ export function msgOp(msg: any): UserOperation {
   return UserOperation[opStr];
 }
 
+var md = new markdown_it({
+  html: true,
+  linkify: true,
+  typographer: true
+});
+
 export function hotRank(comment: Comment): number {
   // Rank = ScaleFactor * sign(Score) * log(1 + abs(Score)) / (Time + 2)^Gravity
 
@@ -21,3 +28,7 @@ export function hotRank(comment: Comment): number {
 
   return rank;
 }
+
+export function mdToHtml(text: string) {
+  return {__html: md.render(text)};
+}