Angular ngx-markdown destroying markdown and converting to plain text

so I've been having an issue in my Angular project, I am aiming to use markdown to render content on a web page and so I decided to give ngx-markdown a try. Now I believe I have everything imported correctly, directives correctly used, etc...

My issue is whenever I use <markdown src="'assets/md/data.md'"></markdown>, the md file certainly displays on the page but it's like all the markdown is deleted, leaving an unformatted text. Output of md file. So that's like all bullet points, header sizing, code formatting, etc... being mysteriously deleted, but bold markdown seems to work.

I am using TailwindCSS for style, however I have tried using the <markdown> selector without any formatting on an individual page, I've tried using [data]="", I've scoured documentation and the internet examples, I'm pretty sure my dependencies are sufficient in my packages.json file.

Now since I have installed ngx-markdown, marked, prismjs, mermaid, clipboard, katex, and emoji-toolkit, I have been getting this error but I doubt it contributes to my problem Warning output

Here's my relevant package.json information

"clipboard": "^2.0.11",
"emoji-toolkit": "^8.0.0",
"katex": "^0.16.0",
"marked": "^9.1.6",
"mermaid": "^10.8.0",
"ngx-markdown": "^17.1.1",
"prismjs": "^1.29.0",


My app.module.ts file

import { NgModule, SecurityContext } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { Scroll2TopComponent } from './shared/scroll2-top/scroll2-top.component';
import { FormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule, provideHttpClient } from '@angular/common/http';

//External Modules
import { MarkdownModule, provideMarkdown } from 'ngx-markdown';

@NgModule({
declarations: [
AppComponent,
NavComponent,
HomeComponent,
AboutComponent,
NotFoundComponent,
Scroll2TopComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
MarkdownModule.forRoot({
loader: HttpClient,
sanitize: SecurityContext.NONE,

}),
MarkdownModule.forChild()
],
providers: [
provideHttpClient(),
provideMarkdown({ loader: HttpClient })
],
bootstrap: [AppComponent]
})
export class AppModule { }


And finally just my html on my "Home" page

<section>
<div>
<div>
<markdown [src]="'assets/md/2024-02-27.md'"></markdown>
</div>
</div>
</section>


Edit: Figured I should actually include the md file for reproducibility:

---

### Syntax highlight
\`\`\`typescript
const language = 'typescript';
\`\`\`

### Lists
1. Ordered list
2. Another bullet point
- Unordered list
- Another unordered bullet

### Blockquote
> Blockquote to the max```

Continue reading...