diff --git a/angular.json b/angular.json
index b9720f0dcf76a0a35f88100f2e70cc0eb0e3367e..504ecd51a1a000f02c2dbe14c6ff876a5f8dac7b 100644
--- a/angular.json
+++ b/angular.json
@@ -23,9 +23,7 @@
],
"styles": [
"src/styles.scss",
- "./node_modules/material-design-icons/iconfont/material-icons.css",
- "node_modules/prismjs/themes/prism-okaidia.css",
- "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
+ "./node_modules/material-design-icons/iconfont/material-icons.css"
],
"scripts": [
"node_modules/marked/lib/marked.js"
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 07d21ea6f9da1fb5a1a6cff1d58374d7dfb3a110..d107cc36e8f7718dcbfff1ec14e31f829d0ea648 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -59,9 +59,6 @@ import { OverlayComponent } from './components/home/_dialogs/overlay/overlay.com
import { DemoDeComponent } from '../assets/i18n/demo/demo-de';
import { DemoEnComponent } from '../assets/i18n/demo/demo-en';
-import 'prismjs/prism';
-import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
-
export function dialogClose(dialogResult: any) {
}
diff --git a/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss b/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
index a10c0c16c7d2853a0934e782c5d1ab8d0a5094c8..b38626eb9a222b1d6249aa2dcdd409d070e97443 100644
--- a/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
+++ b/src/app/components/creator/_dialogs/room-edit/room-edit.component.scss
@@ -60,8 +60,3 @@ mat-hint {
::ng-deep .mat-ink-bar {
background-color: var(--primary) !important;
}
-
-markdown {
- color: var(--on-surface);
-}
-
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index a6dbd96824b59f63939a1065a1528b644a872054..235ec8b30543aab1ecfb0919bb12e26e11e2a12b 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html
@@ -43,9 +43,7 @@
</button>
</div>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
- <p>
- {{ room.description.trim() }}
- </p>
+ <markdown [data]="room.description.trim()"></markdown>
</mat-card-content>
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<mat-grid-list cols="{{viewModuleCount}}" rowHeight="1:1" *ngIf="viewModuleCount > 1">
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index 812a7a8208cfcf1d2494691c755003fe2ff66544..7b4ca770cce12144b3783a5847879cc90af5f926 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
@@ -4,9 +4,8 @@ mat-card {
width: 100%;
max-width: 800px;
min-height: 300px;
- max-height: 600px;
+ max-height: 700px;
background-color: var(--surface)!important;
- margin-top: 7%;
}
mat-card-content > :first-child {
@@ -61,7 +60,7 @@ mat-card-content > :first-child {
mat-grid-list {
margin-top: 0;
- max-height: 45%!important;
+ max-height: 250px!important;
}
.second {
@@ -120,3 +119,7 @@ mat-expansion-panel {
.question-button-div {
margin: 10% 0 10% 0;
}
+
+markdown {
+ margin: 0 3% 0 3% !important;
+}
diff --git a/src/app/components/moderator/moderator.module.ts b/src/app/components/moderator/moderator.module.ts
index 2e4159997fbe3336994e44d42d8c3a830a656038..3d17c18bf5b4d765ce070f607cbddbe37660551d 100644
--- a/src/app/components/moderator/moderator.module.ts
+++ b/src/app/components/moderator/moderator.module.ts
@@ -9,6 +9,7 @@ import { SharedModule } from '../shared/shared.module';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { MarkdownModule } from 'ngx-markdown';
@NgModule({
imports: [
@@ -23,7 +24,8 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
deps: [HttpClient]
},
isolate: true
- })
+ }),
+ MarkdownModule
],
declarations: [
RoomModeratorPageComponent,
diff --git a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
index 9ae3fa645268379100e05e6e2fc35ee164367cd3..dc3fc5db845aa473bf921066538b95203d0cbfc6 100644
--- a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
+++ b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
@@ -24,7 +24,7 @@
</div>
<mat-divider></mat-divider>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
- <p>{{room.description.trim()}}</p>
+ <markdown [data]="room.description.trim()"></markdown>
</mat-card-content>
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px">
<mat-grid-list cols="{{viewModuleCount}}" rowHeight="1:1" *ngIf="viewModuleCount > 1 && this.moderationEnabled">
diff --git a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
index 9cace7ad4794cd2d9ff8be23003bab696313e5f7..207ae9db6a70f5e0dd599d2b905a7c0cfea39718 100644
--- a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
+++ b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
@@ -4,9 +4,8 @@ mat-card {
width: 100%;
max-width: 800px;
min-height: 350px;
- max-height: 600px;
+ max-height: 700px;
background-color: var(--surface)!important;
- margin-top: 5%;
}
mat-card-content > :first-child {
@@ -139,3 +138,7 @@ mat-expansion-panel {
.question-button-div {
margin: 10% 0 10% 0;
}
+
+markdown {
+ margin: 0 3% 0 3% !important;
+}
diff --git a/src/app/components/participant/participant.module.ts b/src/app/components/participant/participant.module.ts
index 3467598d63c86134cd50cd715af9549375edc01e..daeac29741d4316f5ac5698b842b06d7d361a053 100644
--- a/src/app/components/participant/participant.module.ts
+++ b/src/app/components/participant/participant.module.ts
@@ -10,6 +10,7 @@ import { ParticipantContentCarouselPageComponent } from './participant-content-c
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { MarkdownModule } from 'ngx-markdown';
@NgModule({
imports: [
@@ -24,7 +25,8 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
deps: [HttpClient]
},
isolate: true
- })
+ }),
+ MarkdownModule
],
declarations: [
ContentChoiceParticipantComponent,
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.html b/src/app/components/participant/room-participant-page/room-participant-page.component.html
index 668a0c42cd0a7b71689154cd5e8368d2ae8d253a..b38d994a9dfbe92130c32662f0f5721727918254 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.html
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.html
@@ -24,7 +24,7 @@
</div>
<mat-divider></mat-divider>
<mat-card-content *ngIf="room.description" fxLayoutAlign="center">
- <p>{{room.description.trim()}}</p>
+ <markdown [data]="room.description.trim()"></markdown>
</mat-card-content>
<mat-grid-list cols="1" rowHeight="2:1">
<mat-grid-tile>
diff --git a/src/styles.scss b/src/styles.scss
index dbaf1614e62e695a5c0e48fdbf52b1397c1c246b..df559bcc44689258e952a1ca1f02a6bbc5e334c0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -65,6 +65,10 @@ body{
color: var(--on-surface);
}
+markdown {
+ color: var(--on-surface);
+}
+
h2 {
color: var(--on-surface)!important;