Coding Guru
Home

Nextjs How To Use Github-markdown-css

5 min read Oct 13, 2024
Nextjs How To Use Github-markdown-css

Next.js: Enhancing Your Markdown Content with github-markdown-css

Are you building a web application with Next.js and want to seamlessly display Markdown content? You've probably realized that raw Markdown doesn't always translate visually as you'd expect. Enter github-markdown-css, a powerful CSS library designed to style your Markdown with the familiar look and feel of GitHub's platform. Let's dive into how to integrate github-markdown-css into your Next.js project.

Why Choose github-markdown-css?

  • Consistency: It provides a standardized and widely recognized style for Markdown elements, ensuring a familiar and consistent look across your app.
  • GitHub-inspired: If you're used to the GitHub interface, you'll appreciate the seamless transition of its Markdown styling.
  • Lightweight: The library is compact, minimizing the impact on your website's performance.

Integrating github-markdown-css into Next.js

  1. Installation: Start by installing github-markdown-css in your project:

    npm install github-markdown-css

  2. Import and Styling: Create a global stylesheet (e.g., styles/globals.css) and import the library:

    /* styles/globals.css */
@import "github-markdown-css";

  3. Applying the Styles: Now you need to wrap your Markdown content with a specific HTML element to apply the styles. The most common approach is to use a <div> with the class markdown-body:

    // pages/index.js
import React from 'react';

const MyMarkdown = () => {
  const markdownContent = `
  # Hello from Next.js!
  This is an example of Markdown content rendered with github-markdown-css. 
  `;

  return (
    
    
      
    
    
    
  );
};

export default MyMarkdown;

Important Note: Parsing Markdown

The above example assumes you are using a Markdown parser (like marked) to convert your Markdown text into HTML. If you're not already using a parser, you'll need to integrate one.

Customization

While github-markdown-css provides a great default style, you can customize it further. Here's an example of customizing code block styling:

/* styles/globals.css */
@import "github-markdown-css";

/* Customize code blocks */
.markdown-body code {
  background-color: #f0f0f0;
  border-radius: 3px;
  padding: 2px 5px;
}

Example: Displaying Blog Posts

Let's illustrate how you might use github-markdown-css for displaying blog posts in your Next.js app.

  1. Data Fetching: Assume you have blog posts stored in a file or database. Fetch the Markdown content for a specific post.

    // pages/blog/[slug].js
import { getStaticProps } from 'next';
import { marked } from 'marked';
import fs from 'fs';
import path from 'path';

const BlogPost = ({ post }) => {
  return (
    
    
      
    
    
    
  );
};

export const getStaticProps = async ({ params }) => {
  const filePath = path.join(process.cwd(), 'posts', `${params.slug}.md`);
  const fileContents = fs.readFileSync(filePath, 'utf8');
  const post = {
    content: fileContents,
    slug: params.slug,
  };

  return {
    props: {
      post,
    },
  };
};

export default BlogPost;

  2. Dynamic Routing: Set up Next.js dynamic routes to handle different blog posts.

    // next.config.js
module.exports = {
  reactStrictMode: true,
  trailingSlash: true,
  // ... other configurations
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/blog/[slug]',
      },
    ];
  },
};

Conclusion

github-markdown-css simplifies the process of styling your Markdown content in Next.js applications. It provides a consistent and familiar look that aligns with GitHub's popular Markdown styling. By integrating this library, you can present polished and aesthetically pleasing Markdown elements within your website or web app.

Featured Posts