I have a page in my portfolio that's supposed to load a repository and display it's details , but besides the name , languages and topics we don't have other details to describe it in-depth .
Most projects already have readmes which render really nicely on github with GFM , I want that on my page.
We'll start by fetching and parsing the readme into html .
npm i showdown highlight.js
npm i -D @types/showdown
markdown parser
import showdown from 'showdown';
import hljs from 'highlight.js';
export function convertMarkdownToHtml(markdown: string): string {
showdown.extension("highlight", function () {
function htmlunencode(text: string): string {
return text
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
}
return [
{
type: "output",
filter: function (text: string, converter: any, options: any): string {
var left = "<pre><code\\b[^>]*>",
right = "</code></pre>",
flags = "g";
var replacement = function (
wholeMatch: string,
match: string,
left: string,
right: string,
): string {
match = htmlunencode(match);
var lang = (left.match(/class=\"([^ \"]+)/) || [])[1];
left = left.slice(0, 18) + "hljs " + left.slice(18);
if (lang && hljs.getLanguage(lang)) {
return (
left + hljs.highlight(match, { language: lang }).value + right
);
} else {
return left + hljs.highlightAuto(match).value + right;
}
};
return showdown.helper.replaceRecursiveRegExp(
text,
replacement,
left,
right,
flags,
);
},
},
];
});
let converter = new showdown.Converter({
ghCompatibleHeaderId: true,
simpleLineBreaks: true,
ghMentions: true,
extensions: ['highlight'],
tables: true
});
let preContent: string = `
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet"node_modules/highlight.js/styles/atom-one-dark.css">
<script defer src="https://plausible.io/js/script.js"></script>
</head>
<body>
<div id=''>
`;
let postContent: string = `
</div>
</body>
</html>`;
let html: string = preContent + converter.makeHtml(markdown) + postContent;
return html;
}
Then we'll add some styles
.markdown {
@apply text-base-content leading-normal break-words p-2;
overflow-x: scroll;
line-height: 2;
}
.markdown > * + * {
@apply mt-0 mb-4;
}
.markdown li + li {
@apply mt-1;
}
.markdown li > p + p {
@apply mt-6 mb-2;
}
.markdown strong {
@apply font-semibold;
}
.markdown a {
@apply text-blue-600 font-semibold;
}
.markdown a:hover {
@apply text-blue-400 font-semibold;
}
.markdown strong a {
@apply font-bold;
}
.markdown h1 {
@apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2;
}
.markdown h2 {
@apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2;
}
.markdown h3 {
@apply leading-snug text-lg font-semibold mb-4 mt-6;
}
.markdown h4 {
@apply leading-none text-base font-semibold mb-4 mt-6;
}
.markdown h5 {
@apply leading-tight text-sm font-semibold mb-4 mt-6;
}
.markdown h6 {
@apply leading-tight text-sm font-semibold text-base-content mb-4 mt-6;
}
.markdown blockquote {
@apply text-base border-l-4 border-base-200 px-3 text-base-content/70;
}
.markdown code {
@apply font-mono text-sm inline bg-base-100/60 rounded-2xl px-1 py-2 my-5;
}
.markdown pre {
@apply bg-base-200/60 rounded-2xl p-2;
}
.markdown pre code {
@apply block bg-transparent p-0 overflow-visible rounded-2xl my-5;
}
.markdown ul {
@apply text-base pl-8 list-disc;
}
.markdown ol {
@apply text-base pl-4 list-decimal;
}
.markdown kbd {
@apply text-xs inline-block rounded border px-1 py-5 align-middle font-normal font-mono shadow;
}
.markdown table {
@apply text-base border-base-300;
}
.markdown th {
@apply border font-bold text-lg py-1 px-3;
}
.markdown td {
@apply border py-1 px-3;
}
/* Override pygments style background color. */
.markdown .highlight pre {
@apply bg-base-200/40 !important;
}
.markdown pre {
border-radius: "10%";
font-size: 85%;
line-height: 1.8;
overflow: auto;
}
code.hljs {
padding: 3px 5px;
}
/*
Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
base: #282c34
mono-1: #abb2bf
mono-2: #818896
mono-3: #5c6370
hue-1: #56b6c2
hue-2: #61aeee
hue-3: #c678dd
hue-4: #98c379
hue-5: #e06c75
hue-5-2: #be5046
hue-6: #d19a66
hue-6-2: #e6c07b
*/
.hljs {
color: #abb2bf;
background: #282c34;
}
.hljs-comment,
.hljs-quote {
color: #5c6370;
font-style: italic;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
color: #c678dd;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
color: #e06c75;
}
.hljs-literal {
color: #56b6c2;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
color: #98c379;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
color: #d19a66;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
color: #61aeee;
}
.hljs-built_in,
.hljs-title.class_,
.hljs-class .hljs-title {
color: #e6c07b;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}
import styles into your project (most projects, Nextjs or Vite require all stylesheets to be added at the root layout or main.tsx component )
layout.tsx
import "./globals.css";
import "../state/md/markdown.css";
Fetch the readme from github and pass the string into the parser
import { convertMarkdownToHtml } from "@/state/md/parse";
interface GetRepoREADME {
repo: string;
owner: string;
}
export async function getGithubREADME({ repo, owner }: GetRepoREADME) {
try {
const response = await fetch(
`https://raw.githubusercontent.com/${owner}/${repo}/main/README.md`
);
if (!response.ok) {
throw new Error(response.statusText);
}
const text = await response.text();
if (!text) {
throw new Error("no parsable readme");
}
const output_html = convertMarkdownToHtml(text);
return output_html;
} catch (error) {
console.log(" === error === ", error);
return;
}
}
We can the use this in our project , am using Nextjs but you can use whatever you want.
import { getGithubREADME } from "../helpers/getOneRepomarkdown";
interface OneGithubRepoREADMEProps {
repo: string;
owner: string;
}
export async function OneGithubRepoREADME({owner,repo}:OneGithubRepoREADMEProps){
const data = await getGithubREADME({owner,repo})
if (!data ) {
return null;
}
return (
<div id="readme" className='w-[95%] md:w-[85%] h-full
bg-base-200/30 p-5 rounded-xl '>
<h2 className="text-2xl font-bold text-start w-full capitalize">{repo} readme</h2>
<div className="markdown" dangerouslySetInnerHTML={{ __html: data}} />
</div>
);
}
This code works on browser or Nodejs and even server components
You can customize the styles by picking another theme from node_modules/highlight.js/styles and replacing the existing one in the provided CSS (all that start with hljs-)
Shout out to KrauseFx for the code
One extra thing we can add is a stackblitz component to let the visitor play around with our code directly in the browser using the @stackblitz/sdk package
"use client"
import sdk from "@stackblitz/sdk";
import { useEffect } from "react";
interface stackblitzEmbedProps {
repo: string;
owner: string;
}
export function StackblitzEmbed({owner,repo}: stackblitzEmbedProps) {
const selectedRepo = {
github: `${owner}/${repo}`,
openFile: "README.md",
};
useEffect(() => {
sdk.embedGithubProject("embed", selectedRepo.github, {
height: 1000,
clickToLoad: true,
// openFile: selectedRepo.openFile,
});
}, [selectedRepo.github]);
/**
* Open the project in a new window on StackBlitz
*/
function openProject() {
sdk.openGithubProject(selectedRepo.github, {
// openFile: selectedRepo.openFile,
});
}
return (
<div id="stackblitz" className="w-full h-full relative">
<button className="btn btn-sm btn-outline hover:bg-secondary absolute top-[1%] right-[2%]"
onClick={openProject} >
Open in new window
</button>
<div id="embed" className="mt-5 p-5 w-[95%] h-full flex items-center justify-center">B</div>
</div>
)
}
Top comments (0)