I'm currently in the process of building a blog using Angular and I have decided to use Markdown for creating my posts. Specifically, I am looking into integrating ngx-markdown for rendering purposes. As of now, I am developing a component dedicated to "post creation". However, I am facing challenges when it comes to applying styling to the markdown content. Below is a snippet of my component:
<div class="header-container">
<h1 class="header">New post</h1>
<button>Send</button>
</div>
<div class="main-container">
<div class="post-editor">
<label for="title">Title:</label>
<input class="title-field" type="text" name="title"
placeholder="E.g: Introduction to Programming" autocomplete="off"
[(ngModel)]="post.title"
>
<textarea [(ngModel)]="post.content"></textarea>
</div>
<div class="post-preview">
<markdown class="markdown" [data]="getPostAsString()" ngPreserveWhitespaces>
</markdown>
</div>
</div>
import { Component, OnInit } from '@angular/core';
interface Post {
title: string;
content: string;
}
@Component({
selector: 'app-create-post',
templateUrl: './create-post.component.html',
styleUrls: ['./create-post.component.css']
})
export class CreatePostComponent implements OnInit {
post: Post = {
title: 'Introduction to Programming',
content: 'Lorem ipsum dolor, sit amet...'
};
constructor() {
}
ngOnInit(): void {
}
getPostAsString(): string {
return `# ${this.post.title}\n` + this.post.content;
}
}
h1 {
margin-top: 20px;
color: blue;
}
label {
font-size: 18px;
}
input, textarea {
width: 100%;
}
input {
height: 25px;
}
textarea {
height: 300px;
}
button {
margin-left: auto;
height: 75%;
align-self: center;
font-size: 18px;
padding: 5px 10px;
}
.header-container, .main-container {
display: flex;
}
.post-editor, .post-preview {
flex: 1;
}
.post-preview {
padding-top: 20px;
}
.post-editor {
margin-right: 40px;
}
.header {
margin-bottom: 25px;
}
.title-field {
display: block;
margin-top: 5px;
margin-bottom: 20px;
}
Take note of this specific style rule:
h1 {
color: blue;
}
I attempted to test its application. The header displaying "New Post" at the top of the page does indeed turn blue, while the markdown counterpart does not. I even tried utilizing different selectors like markdown h1 and .post-preview h1, but unfortunately, none seemed to work. What could be causing this issue and how can I resolve it?