diff --git a/angular.json b/angular.json
index 8f6c4ae33..177c344fd 100644
--- a/angular.json
+++ b/angular.json
@@ -49,7 +49,8 @@
             },
             "scripts": [
               "node_modules/ngx-markdown-editor/assets/highlight.js/highlight.min.js",
-              "node_modules/ngx-markdown-editor/assets/marked.min.js"
+              "node_modules/ngx-markdown-editor/assets/marked.min.js",
+              "src/assets/js/ace/snippetsMarkdown.js"
             ]
           },
           "configurations": {
diff --git a/package.json b/package.json
index 775f3508d..ee4605f0b 100644
--- a/package.json
+++ b/package.json
@@ -43,13 +43,14 @@
     "ace-builds": "^1.42.0",
     "chart.js": "^4.4.9",
     "diff": "^8.0.2",
+    "markdown-it": "^14.1.0",
+    "markdown-it-video": "^0.6.3",
     "ngx-markdown-editor": "^5.3.4",
     "primeflex": "^4.0.0",
     "primeicons": "^7.0.0",
     "primeng": "^19.0.9",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "turndown": "^7.2.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
@@ -60,7 +61,7 @@
     "@commitlint/config-conventional": "^19.7.1",
     "@types/jasmine": "~5.1.0",
     "@types/jest": "^29.5.14",
-    "@types/turndown": "^5.0.5",
+    "@types/markdown-it": "^14.1.2",
     "angular-eslint": "19.1.0",
     "angularx-qrcode": "^19.0.0",
     "eslint": "^9.20.0",
diff --git a/src/@types/markdown-it-video.d.ts b/src/@types/markdown-it-video.d.ts
new file mode 100644
index 000000000..1006af646
--- /dev/null
+++ b/src/@types/markdown-it-video.d.ts
@@ -0,0 +1,9 @@
+declare module 'markdown-it-video' {
+  import { PluginSimple } from 'markdown-it';
+
+  const videoPlugin: PluginSimple;
+  export default videoPlugin;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const ace: any;
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index ab079babd..bdb631834 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,6 +1,7 @@
 import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin';
 import { provideStore } from '@ngxs/store';
 
+import { provideMarkdown } from 'ngx-markdown';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { ConfirmationService, MessageService } from 'primeng/api';
@@ -42,5 +43,6 @@ export const appConfig: ApplicationConfig = {
     ConfirmationService,
     MessageService,
     { provide: ErrorHandler, useClass: GlobalErrorHandler },
+    provideMarkdown(),
   ],
 };
diff --git a/src/app/features/project/overview/components/overview-wiki/overview-wiki.component.html b/src/app/features/project/overview/components/overview-wiki/overview-wiki.component.html
index f0f538741..84fc750cf 100644
--- a/src/app/features/project/overview/components/overview-wiki/overview-wiki.component.html
+++ b/src/app/features/project/overview/components/overview-wiki/overview-wiki.component.html
@@ -4,7 +4,9 @@ <h2>{{ 'project.overview.wiki.title' | translate }}</h2>
     <p-skeleton width="100%" height="5rem" />
   } @else {
     @if (wikiContent()) {
-      <osf-truncated-text [text]="wikiContent()" />
+      <osf-truncated-text [text]="wikiContent()" [hasContent]="true">
+        <osf-markdown [markdownText]="wikiContent()"></osf-markdown>
+      </osf-truncated-text>
     } @else {
       <div [innerHtml]="'project.overview.wiki.noWikiMessage' | translate"></div>
     }
diff --git a/src/app/features/project/overview/components/overview-wiki/overview-wiki.component.ts b/src/app/features/project/overview/components/overview-wiki/overview-wiki.component.ts
index 7c99fe996..55245fb21 100644
--- a/src/app/features/project/overview/components/overview-wiki/overview-wiki.component.ts
+++ b/src/app/features/project/overview/components/overview-wiki/overview-wiki.component.ts
@@ -7,11 +7,11 @@ import { Skeleton } from 'primeng/skeleton';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { WikiSelectors } from '@osf/features/project/wiki/store';
-import { TruncatedTextComponent } from '@shared/components';
+import { MarkdownComponent, TruncatedTextComponent } from '@shared/components';
 
 @Component({
   selector: 'osf-project-wiki',
-  imports: [Skeleton, TranslatePipe, TruncatedTextComponent],
+  imports: [Skeleton, TranslatePipe, TruncatedTextComponent, MarkdownComponent],
   templateUrl: './overview-wiki.component.html',
   styleUrl: './overview-wiki.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/features/project/wiki/components/compare-section/compare-section.component.ts b/src/app/features/project/wiki/components/compare-section/compare-section.component.ts
index b11bc130d..901b1130f 100644
--- a/src/app/features/project/wiki/components/compare-section/compare-section.component.ts
+++ b/src/app/features/project/wiki/components/compare-section/compare-section.component.ts
@@ -10,7 +10,6 @@ import { FormsModule } from '@angular/forms';
 import { WikiVersion } from '../../models';
 
 import * as Diff from 'diff';
-import TurndownService from 'turndown';
 
 @Component({
   selector: 'osf-compare-section',
@@ -39,10 +38,7 @@ export class CompareSectionComponent {
   ]);
 
   content = computed(() => {
-    const changes = Diff.diffWords(
-      this.convertHtmlToMarkdown(this.versionContent()),
-      this.convertHtmlToMarkdown(this.previewContent())
-    );
+    const changes = Diff.diffWords(this.versionContent(), this.previewContent());
     return changes
       .map((change) => {
         if (change.added) {
@@ -61,18 +57,6 @@ export class CompareSectionComponent {
       this.selectVersion.emit(this.selectedVersion);
     });
   }
-  convertHtmlToMarkdown(html: string): string {
-    const turndownService = new TurndownService({
-      headingStyle: 'atx',
-      emDelimiter: '*',
-      strongDelimiter: '**',
-      hr: '---',
-      linkStyle: 'inlined',
-      bulletListMarker: '-',
-      codeBlockStyle: 'indented',
-    });
-    return turndownService.turndown(html);
-  }
   onVersionChange(versionId: string): void {
     this.selectedVersion = versionId;
     this.selectVersion.emit(versionId);
diff --git a/src/app/features/project/wiki/components/edit-section/edit-section.component.html b/src/app/features/project/wiki/components/edit-section/edit-section.component.html
index 5c7eda186..838eaf3e1 100644
--- a/src/app/features/project/wiki/components/edit-section/edit-section.component.html
+++ b/src/app/features/project/wiki/components/edit-section/edit-section.component.html
@@ -22,7 +22,7 @@ <h2 class="mr-2">{{ 'project.wiki.edit' | translate }}</h2>
       [(ngModel)]="content"
       [options]="options"
       (onEditorLoaded)="onEditorLoaded($event)"
-      (onPreviewDomChanged)="onPreviewDomChanged($event)"
+      (onPreviewDomChanged)="onPreviewDomChanged()"
       height="100%"
     >
       <slot custom-btns>
@@ -32,10 +32,19 @@ <h2 class="mr-2">{{ 'project.wiki.edit' | translate }}</h2>
         <button class="btn btn-sm btn-default" title="Redo" (click)="redo()">
           <i class="fas fa-rotate-right"></i>
         </button>
-        <div class="btn-group">
-          <button class="btn btn-sm btn-default" title="Horizontal rule <hr>" (click)="doHorizontalRule()">
-            <i class="fas fa-grip-lines"></i>
-          </button>
+        <button class="btn btn-sm btn-default" title="Horizontal rule <hr>" (click)="doHorizontalRule()">
+          <i class="fas fa-grip-lines"></i>
+        </button>
+        <div class="btn btn-sm btn-default flex align-items-center">
+          <p-checkbox
+            inputId="autoComplete"
+            [value]="autoCompleteEnabled"
+            size="small"
+            variant="outlined"
+            binary
+            (onChange)="toggleAutocomplete()"
+          />
+          <label for="autoComplete" class="ml-2 mb-0"> Autocomplete </label>
         </div>
         <button class="btn btn-sm btn-default" title="Wiki syntax help" (click)="openSyntaxHelpDialog()">
           <i class="fas fa-question"></i>
diff --git a/src/app/features/project/wiki/components/edit-section/edit-section.component.ts b/src/app/features/project/wiki/components/edit-section/edit-section.component.ts
index 57899def6..11ae7aba0 100644
--- a/src/app/features/project/wiki/components/edit-section/edit-section.component.ts
+++ b/src/app/features/project/wiki/components/edit-section/edit-section.component.ts
@@ -2,17 +2,20 @@ import { LMarkdownEditorModule, MdEditorOption } from 'ngx-markdown-editor';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
+import { Checkbox } from 'primeng/checkbox';
 import { DialogService } from 'primeng/dynamicdialog';
 import { PanelModule } from 'primeng/panel';
 
-import { ChangeDetectionStrategy, Component, inject, input, OnInit, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, input, OnInit, output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
+import 'ace-builds/src-noconflict/ext-language_tools';
+
 import { WikiSyntaxHelpDialogComponent } from '../wiki-syntax-help-dialog/wiki-syntax-help-dialog.component';
 
 @Component({
   selector: 'osf-edit-section',
-  imports: [PanelModule, Button, TranslatePipe, FormsModule, LMarkdownEditorModule],
+  imports: [PanelModule, Button, TranslatePipe, FormsModule, LMarkdownEditorModule, Checkbox],
   templateUrl: './edit-section.component.html',
   styleUrl: './edit-section.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -20,10 +23,10 @@ import { WikiSyntaxHelpDialogComponent } from '../wiki-syntax-help-dialog/wiki-s
 })
 export class EditSectionComponent implements OnInit {
   readonly currentContent = input.required<string>();
+  readonly versionContent = input.required<string>();
   readonly isSaving = input<boolean>(false);
   readonly contentChange = output<string>();
   readonly saveContent = output<string>();
-  private htmlContent = '';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private editorInstance: any;
   content = '';
@@ -41,6 +44,18 @@ export class EditSectionComponent implements OnInit {
     hideIcons: [''],
   };
 
+  autoCompleteEnabled = false;
+
+  constructor() {
+    effect(() => {
+      const versionContent = this.versionContent();
+      if (!this.initialContent) {
+        this.content = versionContent;
+        this.initialContent = versionContent;
+      }
+    });
+  }
+
   ngOnInit(): void {
     this.content = this.currentContent();
     this.initialContent = this.currentContent();
@@ -50,15 +65,20 @@ export class EditSectionComponent implements OnInit {
   onEditorLoaded(editor: any) {
     this.editorInstance = editor;
     editor.setShowPrintMargin(false);
+    const langTools = ace.require('ace/ext/language_tools');
+    editor.setOptions({
+      enableBasicAutocompletion: this.autoCompleteEnabled,
+      enableLiveAutocompletion: this.autoCompleteEnabled,
+      enableSnippets: [langTools.snippetCompleter],
+    });
   }
 
-  onPreviewDomChanged(event: HTMLElement) {
-    this.htmlContent = event.innerHTML;
-    this.contentChange.emit(event.innerHTML);
+  onPreviewDomChanged() {
+    this.contentChange.emit(this.editorInstance?.getValue());
   }
 
   save() {
-    this.saveContent.emit(this.htmlContent);
+    this.saveContent.emit(this.editorInstance?.getValue());
   }
 
   revert() {
@@ -85,4 +105,14 @@ export class EditSectionComponent implements OnInit {
       modal: true,
     });
   }
+
+  toggleAutocomplete() {
+    if (this.editorInstance) {
+      this.autoCompleteEnabled = !this.autoCompleteEnabled;
+      this.editorInstance.setOptions({
+        enableBasicAutocompletion: this.autoCompleteEnabled,
+        enableLiveAutocompletion: this.autoCompleteEnabled,
+      });
+    }
+  }
 }
diff --git a/src/app/features/project/wiki/components/view-section/view-section.component.html b/src/app/features/project/wiki/components/view-section/view-section.component.html
index 901b184a7..5f641e59f 100644
--- a/src/app/features/project/wiki/components/view-section/view-section.component.html
+++ b/src/app/features/project/wiki/components/view-section/view-section.component.html
@@ -22,7 +22,7 @@ <h2 class="mr-2">{{ 'project.wiki.view' | translate }}</h2>
     <p-panel class="view-panel" showHeader="false">
       <div class="editor-view-mode mt-3">
         @if (content()) {
-          <div class="md-editor-container" [innerHTML]="content() | safeHtml"></div>
+          <osf-markdown [markdownText]="content()"></osf-markdown>
         } @else {
           <p class="font-italic">{{ 'project.wiki.version.noContent' | translate }}</p>
         }
diff --git a/src/app/features/project/wiki/components/view-section/view-section.component.ts b/src/app/features/project/wiki/components/view-section/view-section.component.ts
index 73f813414..65e1d89b2 100644
--- a/src/app/features/project/wiki/components/view-section/view-section.component.ts
+++ b/src/app/features/project/wiki/components/view-section/view-section.component.ts
@@ -1,6 +1,5 @@
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { SafeHtmlPipe } from 'primeng/menu';
 import { PanelModule } from 'primeng/panel';
 import { Select } from 'primeng/select';
 import { Skeleton } from 'primeng/skeleton';
@@ -8,11 +7,13 @@ import { Skeleton } from 'primeng/skeleton';
 import { ChangeDetectionStrategy, Component, computed, effect, input, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
+import { MarkdownComponent } from '@osf/shared/components';
+
 import { WikiVersion } from '../../models';
 
 @Component({
   selector: 'osf-view-section',
-  imports: [PanelModule, Select, FormsModule, TranslatePipe, SafeHtmlPipe, Skeleton],
+  imports: [PanelModule, Select, FormsModule, TranslatePipe, Skeleton, MarkdownComponent],
   templateUrl: './view-section.component.html',
   styleUrl: './view-section.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/features/project/wiki/services/wiki.service.ts b/src/app/features/project/wiki/services/wiki.service.ts
index f3e39f8ef..8d22a7b10 100644
--- a/src/app/features/project/wiki/services/wiki.service.ts
+++ b/src/app/features/project/wiki/services/wiki.service.ts
@@ -67,8 +67,7 @@ export class WikiService {
             return of('');
           }
           return this.#http.get(downloadLink, { responseType: 'text' });
-        }),
-        map((content) => (content ? content.replace(/\n/g, '<br>') : ''))
+        })
       );
   }
 
diff --git a/src/app/features/project/wiki/wiki.component.html b/src/app/features/project/wiki/wiki.component.html
index a7ada9fbd..a0d11613f 100644
--- a/src/app/features/project/wiki/wiki.component.html
+++ b/src/app/features/project/wiki/wiki.component.html
@@ -40,6 +40,7 @@
   @if (wikiModes().edit) {
     <osf-edit-section
       [currentContent]="previewContent()"
+      [versionContent]="versionContent()"
       (contentChange)="updateWikiPreviewContent($event)"
       [isSaving]="isWikiVersionSubmitting()"
       (saveContent)="onSaveContent($event)"
diff --git a/src/app/features/project/wiki/wiki.component.ts b/src/app/features/project/wiki/wiki.component.ts
index 82621c609..f9bcd216e 100644
--- a/src/app/features/project/wiki/wiki.component.ts
+++ b/src/app/features/project/wiki/wiki.component.ts
@@ -93,7 +93,6 @@ export class WikiComponent {
   protected wikiIdFromQueryParams = this.route.snapshot.queryParams['wiki'];
 
   constructor() {
-    this.actions.getWikiContent(this.projectId());
     this.actions
       .getWikiList(this.projectId())
       .pipe(
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index b4f37c2e0..b6f851f17 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -11,6 +11,7 @@ export { FullScreenLoaderComponent } from './full-screen-loader/full-screen-load
 export { IconComponent } from './icon/icon.component';
 export { LineChartComponent } from './line-chart/line-chart.component';
 export { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';
+export { MarkdownComponent } from './markdown/markdown.component';
 export { MyProjectsTableComponent } from './my-projects-table/my-projects-table.component';
 export { PasswordInputHintComponent } from './password-input-hint/password-input-hint.component';
 export { PieChartComponent } from './pie-chart/pie-chart.component';
diff --git a/src/app/shared/components/markdown/markdown.component.html b/src/app/shared/components/markdown/markdown.component.html
new file mode 100644
index 000000000..2a28f5f73
--- /dev/null
+++ b/src/app/shared/components/markdown/markdown.component.html
@@ -0,0 +1 @@
+<div class="md-editor-container" [innerHTML]="renderedHtml()"></div>
diff --git a/src/app/shared/components/markdown/markdown.component.scss b/src/app/shared/components/markdown/markdown.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/components/markdown/markdown.component.spec.ts b/src/app/shared/components/markdown/markdown.component.spec.ts
new file mode 100644
index 000000000..93bffb488
--- /dev/null
+++ b/src/app/shared/components/markdown/markdown.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MarkdownComponent } from './markdown.component';
+
+describe('MarkdownComponent', () => {
+  let component: MarkdownComponent;
+  let fixture: ComponentFixture<MarkdownComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MarkdownComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MarkdownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/markdown/markdown.component.ts b/src/app/shared/components/markdown/markdown.component.ts
new file mode 100644
index 000000000..e3960da92
--- /dev/null
+++ b/src/app/shared/components/markdown/markdown.component.ts
@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, Signal } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+import MarkdownIt from 'markdown-it';
+import markdownItVideo from 'markdown-it-video';
+
+@Component({
+  selector: 'osf-markdown',
+  imports: [],
+  templateUrl: './markdown.component.html',
+  styleUrl: './markdown.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MarkdownComponent {
+  markdownText = input<string>('');
+
+  private md: MarkdownIt;
+  private sanitizer = inject(DomSanitizer);
+
+  renderedHtml: Signal<SafeHtml> = computed(() => {
+    const result = this.md.render(this.markdownText());
+    return this.sanitizer.bypassSecurityTrustHtml(result);
+  });
+
+  constructor() {
+    this.md = new MarkdownIt({
+      html: true,
+      linkify: true,
+      typographer: true,
+      breaks: true,
+    }).use(markdownItVideo, {
+      youtube: { width: 560, height: 315 },
+      vimeo: { width: 560, height: 315 },
+    });
+  }
+}
diff --git a/src/app/shared/components/truncated-text/truncated-text.component.html b/src/app/shared/components/truncated-text/truncated-text.component.html
index 2c278eba1..c4c70a543 100644
--- a/src/app/shared/components/truncated-text/truncated-text.component.html
+++ b/src/app/shared/components/truncated-text/truncated-text.component.html
@@ -1,11 +1,17 @@
 <div class="flex flex-column gap-3">
-  <div
-    #textContent
-    [innerHTML]="text()"
-    class="text-content"
-    [class.expanded]="isTextExpanded()"
-    [style.--line-clamp]="maxVisibleLines()"
-  ></div>
+  @if (hasContent()) {
+    <div #textContent class="text-content" [class.expanded]="isTextExpanded()" [style.--line-clamp]="maxVisibleLines()">
+      <ng-content></ng-content>
+    </div>
+  } @else {
+    <div
+      #textContent
+      [innerHTML]="text()"
+      class="text-content"
+      [class.expanded]="isTextExpanded()"
+      [style.--line-clamp]="maxVisibleLines()"
+    ></div>
+  }
 
   @if (hasOverflowingText()) {
     <a
diff --git a/src/app/shared/components/truncated-text/truncated-text.component.ts b/src/app/shared/components/truncated-text/truncated-text.component.ts
index 342878692..ce1e6e133 100644
--- a/src/app/shared/components/truncated-text/truncated-text.component.ts
+++ b/src/app/shared/components/truncated-text/truncated-text.component.ts
@@ -14,6 +14,7 @@ import { AfterViewInit, Component, ElementRef, input, signal, viewChild } from '
 })
 export class TruncatedTextComponent implements AfterViewInit {
   readonly text = input('');
+  readonly hasContent = input<boolean>(false);
   readonly maxVisibleLines = input(3);
   protected readonly contentElement = viewChild<ElementRef>('textContent');
   protected isTextExpanded = signal(false);
diff --git a/src/assets/js/ace/snippetsMarkdown.js b/src/assets/js/ace/snippetsMarkdown.js
new file mode 100644
index 000000000..49e593af2
--- /dev/null
+++ b/src/assets/js/ace/snippetsMarkdown.js
@@ -0,0 +1,86 @@
+ace.define('ace/snippets/markdown', ['require', 'exports', 'module'], function (require, exports, module) {
+  'use strict';
+
+  //    Important: In the body of each snippet, the white spaces is a tab, not a series of spaces, and is required.
+
+  exports.snippetText =
+    '# Markdown\n\
+\n\
+snippet font-italic\n\
+	*${1:text}*\n\
+\n\
+snippet font-bold\n\
+	**${1:text}**\n\
+\n\
+snippet math-inline\n\
+	\$${1:text}\$\n\
+snippet heading-1\n\
+	\n\
+	# ${1:title}\n\
+\n\
+snippet heading-2\n\
+	\n\
+	## ${1:title}\n\
+\n\
+snippet heading-3\n\
+	\n\
+	### ${1:title}\n\
+\n\
+snippet heading-4\n\
+	\n\
+	#### ${1:title}\n\
+\n\
+snippet horizontal-rule\n\
+	\n\
+	---\n\
+	\n\
+\n\
+snippet blockquote\n\
+	\n\
+	> ${1:quote}\n\
+\n\
+snippet codeblock\n\
+	\n\
+	```\n\
+	${1:snippet}\n\
+	```\n\
+\n\
+snippet ![ (image)\n\
+snippet image\n\
+	![${1:alttext}](${2:url} "${3:title}")\n\
+\n\
+snippet [ (hyperlink)\n\
+snippet hyperlink\n\
+	[${1:linktext}](${2:url} "${3:title}")\n\
+\n\
+snippet numbered-list\n\
+	\n\
+	1. ${1:item}\n\
+\n\
+snippet bulleted-list\n\
+	\n\
+	* ${1:item}\n\
+\n\
+snippet video\n\
+	\n\
+	@[${1:service}](${2:url})\n\
+\n\
+snippet youtube-video\n\
+	\n\
+	@[youtube](${1:url})\n\
+\n\
+snippet vimeo-video\n\
+	\n\
+	@[vimeo](${1:url})\n\
+\n\
+snippet prezi-video\n\
+	\n\
+	@[prezi](${1:url})\n\
+\n\
+snippet table-of-contents\n\
+	\n\
+	@[toc](${1:optional_label})\n\
+\n\
+';
+  exports.scope = 'markdown';
+});
diff --git a/src/assets/styles/components/md-editor.scss b/src/assets/styles/components/md-editor.scss
index 00a750ef2..844fb67ab 100644
--- a/src/assets/styles/components/md-editor.scss
+++ b/src/assets/styles/components/md-editor.scss
@@ -28,6 +28,7 @@
       position: relative;
       padding-right: 40px;
       background-color: var(--white);
+      line-height: 1;
 
       .hide-split {
         position: absolute;
@@ -36,6 +37,23 @@
       }
     }
 
+    .p-checkbox-sm,
+    .p-checkbox-sm .p-checkbox-box {
+      width: var(--p-checkbox-sm-width);
+      height: var(--p-checkbox-sm-height);
+    }
+
+    .p-checkbox-checked {
+      .p-checkbox-icon {
+        color: var(--dark-blue-1);
+      }
+    }
+
+    .p-checkbox-box {
+      border: 1px solid var(--dark-blue-1);
+      background: transparent;
+    }
+
     h1,
     h2 {
       margin-top: 20px;
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 8886e903f..91d36267b 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -4,8 +4,16 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [],
+    "typeRoots": [
+      "src/@types",
+      "node_modules/@types"
+    ]
   },
-  "files": ["src/main.ts"],
-  "include": ["src/**/*.d.ts"]
-}
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
\ No newline at end of file