PHP Classes

Advise on CSS in documentation

Recommend this page to a friend!

      MarkDownify  >  All threads  >  Advise on CSS in documentation  >  (Un) Subscribe thread alerts  
Subject:Advise on CSS in documentation
Summary:No mention of CSS required to make this markup work
Messages:3
Author:Martin Price
Date:2023-08-15 15:00:15
 

  1. Advise on CSS in documentation   Reply   Report abuse  
Picture of Martin Price Martin Price - 2023-08-15 15:00:15
There is no mention in the usage of the need for CSS to support this. How would you add this to the page to make this html look like github markdown?

  2. Re: Advise on CSS in documentation   Reply   Report abuse  
Picture of Juan Camacho Juan Camacho - 2023-08-16 05:30:06 - In reply to message 1 from Martin Price
Hi Martin,

Here's how you can add CSS to the page to achieve a GitHub-like look:

1. Include GitHub Markdown CSS:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css">

2. Wrap the generated HTML output from MarkDownify in a <div> element with the class markdown-body. This class is defined in the GitHub Markdown CSS and applies the styling consistent with GitHub's Markdown rendering.

// Markdown content
$text = "# Hello, MarkDownify!\n\nThis is **bold** and *italic* text.";

// Create a new instance of MarkDownify
$parser = new MarkDownify($text);
// Parse Markdown into HTML
$html = $parser ->parse();

echo '<div class="markdown-body">' . $html . '</div>';

  3. Re: Advise on CSS in documentation   Reply   Report abuse  
Picture of Martin Price Martin Price - 2023-08-16 08:14:56 - In reply to message 2 from Juan Camacho
Great thanks. I'll give this a spin