Shared layouts for markdown files in Remix

Within the earlier article, we added the Typography Tailwind plugin to render every weblog properly.
Nevertheless, we did not have a wonderful place to place the prose class for rendering functions.

We set the prose on the root.tsx file.
This works, nevertheless it means we add the prose class to actually each rendered web page.

To make it a bit extra sustainable, we will use the shared layouts method to create a novel weblog format.

Including a shared markdown format

After we arrange our markdown files in Remix, we devoted a weblog folder for them.

We are able to merely create a weblog.tsx file in our routes listing to make use of the shared format.

This file can be utilized to render particular layouts for the weblog gadgets.

Let’s maintain it tremendous easy for now:

import { Outlet } from '@remix-run/react';

export default operate Weblog() {
  return (
    <div className='prose'>
      <h1>Welcome to the weblog:</h1>
      <Outlet />
    </div>
  );
}

Every weblog merchandise will now have this static heading title and its markdown rendered contained in the outlet!

Ensuing within the following:

The cool half is that this format will be as prolonged as you need, and will probably be utilized by all markdown recordsdata within the weblog listing!

In case you are , I uploaded the code for this text on this GitHub repo.

Thanks for studying, and let’s join!

Thanks for studying my weblog. Be happy to subscribe to my e mail e-newsletter and join on Facebook or Twitter