Add Pages to Your Angular Website Using Markdown Files

0

Start creating your site content in Markdown and enjoy its cleaner, more maintainable syntax.

Markdown is a popular format for writing web content. Its compromise between HTML and plain English allows writers to use a more familiar syntax. This can go a long way in facilitating the day-to-day running of multi-author blogs and similar sites.

Markdown can be especially useful if you want to start a blog or have multiple web pages with content. Using Markdown files allows you to focus more on the content, rather than the code around that content.

USE VIDEO OF THE DAY

You can integrate Markdown with Angular using the ngx-markdown node package and configuring it to work inside a component.

Configure an Angular application

If you don’t have an Angular app yet, you can download this sample Angular app from GitHub.

  1. On the project page on GitHub, click the Coded button. Select Download ZIP.
  2. Unzip the folder to your local computer.
  3. Open the project using an IDE, such as Visual Code, Notepad++, or Sublime Text. If you’re using an IDE, you can use a built-in terminal to run all the necessary commands.
  4. Navigate to the project’s root folder using a terminal. The name of the root folder is muo-sample-angular-app-mainand it contains the e2e and src Folders. For example, if your project is in the “Downloads” folder, run the following command to navigate to the folder.
    cd C:UsersSharlDownloadsmuo-sample-angular-app-main
  5. Install node modules in the project. If you cannot run Node commands, you may need to install Node.js on your computer.
    npm install
  6. You can now launch the Angular application. Run the following command in the project root folder.
    ng serve
  7. After running the ng serve command, wait for the project to finish compiling. When done, the command line will display the local address where your Angular application will run. Usually it’s on http://localhost:4200/.
  8. Open a web browser and enter the address that hosts your site, for example, http://localhost:4200/. Once the page loads, you should be able to see the home page of the Angular sample app.


How to Install Ngx-Markdown in Your Angular Application

To be able to use Markdown files in your Angular application, you will need to install the ngx-markdown package.

  1. In the root folder of your project, run the following command in the terminal. Make sure the ngx-markdown package version is compatible with your Angular version.
    npm install [email protected]^10.1.1 
  2. Open file app.module.ts. This folder is under project/src/app case.
  3. Configure the new Markdown module. Import the following packages:
    import { SecurityContext } from '@angular/core';
    import { MarkdownModule } from 'ngx-markdown';
    import { HttpClientModule, HttpClient } from '@angular/common/http';
  4. Add the Markdown module to the imports table.
    imports: [
    ...
    HttpClientModule,
    MarkdownModule.forRoot({ loader: HttpClient, sanitize: SecurityContext.NONE })
    ],


How to create your Markdown files

Each Markdown file will represent a content page for your website. You will need to create a folder to store your Markdown files and populate your Markdown files with content.

  1. Navigate to the assets folder, which is under the project/src case.
  2. Create a new folder called posts.
  3. Create multiple Markdown files. Markdown files use an .md extension.
  4. Populate .md files with content formatted in Markdown syntax. Here are some examples of content you can use:

    ___
    This is how you make an awesome Chocolate Cheesecake:
    * Crush the biscuits, mix with butter.
    * Let it set in the fridge for 10 minutes.
    * Mix some cream with syrup.
    * Put it on top of the biscuits then put it back in the fridge.


How to render Markdown file in component

You’ll need to list each of these files on the app’s home page, so you can access them.

  1. Open home.component.html case. This folder is under project/src/app/home case.
  2. Add links to your new Markdown pages. You should build your links based on the name of your Markdown files. For example, if you had a Markdown file called “Recipe.md”, then the page URL would be “/posts/post/Recipe”.
    <div class="links">
    <a routerLink="/posts/post/ChocolateCheesecakeRecipe" style="margin-bottom:24px">Chocolate Cheesecake Recipe >></a>
    <br>
    <a routerLink="/posts/post/StrawberryCheesecakeRecipe" style="margin-bottom:24px">Strawberry Cheesecake Recipe
    >></a>
    <br>
    <a routerLink="/posts/post/CaramelCheesecakeRecipe" style="margin-bottom:24px">Caramel Cheesecake Recipe >></a>
    </div>
  3. Add style to links:
    .links {
    padding: 72px;
    text-align: center;
    }
  4. Create another component that you can use as a separate page. This page should be able to render any given Markdown file. In the terminal run the following ng generate command to create a new component:
    ng g c home/posts
  5. There should now be four new files generated in the new “posts” folder. This includes “posts.component.html”, “posts.component.css”, “posts.component.ts”, and “posts.component.spec.ts”.
  6. Open the messages.component.html file and add HTML code to render Markdown files.
    <div style="padding:100px" markdown [src]="post"></div>
  7. Open the positions.component.ts case. Add routing import.
    import { ActivatedRoute } from '@angular/router';
  8. Replace the ngOnInit() constructor and functions with TypeScript code to render Markdown files. This will take the post name from the URL link and route to the corresponding Markdown file stored in the assets folder.
    post: string; 
    href: string;
    constructor(private route: ActivatedRoute) { }
    ngOnInit(): void {
    let articleName = this.route.snapshot.paramMap.get('article');
    this.href = window.location.href;
    this.post = './assets/posts/' + articleName + '.md';
    }
  9. Open the app-routing.module.ts case. This folder is under project/src/app case.
  10. Import the new post component and add it to the routes array.
    import { PostsComponent } from './home/posts/posts.component';
    const routes: Routes = [
    { path: 'posts/post/:article', component: PostsComponent },
    ];
  11. You can now relaunch the Angular application.
    ng serve 
  12. Visit http://localhost:4200 or any address hosting your site.
  13. Click on one of the links on the page. You should now see Markdown content rendered on a separate page.
  14. You can download a working example from the GitHub project page. You can follow the instructions in the README file to download and run the project.


Using Markdown in Your Angular Application

Using Markdown files on your website allows you to focus more on your content. This can be very useful for blogging sites. If you have an Angular application, you can use Markdown files for your web pages using the ngx-markdown node package.

You can read more about other tech stacks that can be helpful in building a blogging website. One of them is Hugo, a static site builder that also renders Markdown files as web pages.


Source link

Share.

About Author

Comments are closed.