Feasibility of making this work with pure markdown blog post

[StrongerXi]

Hey, I got here from reddit, and this tool seems great, thanks for making it:).

I'm wondering how feasible is it to make this work with this other project called zero-md? Basically I'm trying to write some blog post in pure markdown, and render it in HTML. But looks like zero-md uses another project to parse the markdown source -- marked.

So to extend zero-md with displaying github permalink, we'd have to go tweak marked? Do you have some other idea?

[dwjohnston]

Hey - thanks for getting in touch.

I think you're absolutely right - this would have wider applicability pure markdown solution.

Presumably you would declare some special syntax like

# regular title

regular section text here 

!github:https://github.com/dwjohnston/react-github-permalink/blob/5b15aa07e60af4e317086f391b28cadf9aae8e1b/sample_files/sample1.go#L1-L5

(Or simply parse the gihub URLs!)

Reality is - right now I'm not about to stop using .mdx - MDX has all the advantages of it being markdown, while letting me include arbitrary React code as I need it.

In terms of how you would go about implementing this, there's two parts.

1. Parsing the URL and getting the lines to show:

This logic is here:

react-github-permalink/src/GithubPermalinkContext.tsx

Lines 131 to 171 in 15aa842

	async function defaultGetPermalinkFn(permalink: string, githubToken?: string, onError?: (err: unknown) => void): Promise<GithubPermalinkDataResponse> {
	const config = parseGithubPermalinkUrl(permalink);
	const options = githubToken ? {
	headers: {
	Authorization: `Bearer ${githubToken}`
	}
	} : undefined;
	const contentPromise = fetch(`https://api.github.com/repos/${config.owner}/${config.repo}/contents/${config.path}?ref=${config.commit}`, options);
	const commitPromise = fetch(`https://api.github.com/repos/${config.owner}/${config.repo}/commits/${config.commit}`, options);
	const [contentResult, commitResult] = await Promise.all([contentPromise, commitPromise]);
	if (!contentResult.ok) {
	onError?.(contentResult);
	return handleResponse(contentResult);
	}
	if (!commitResult.ok) {
	onError?.(commitResult);
	return handleResponse(commitResult);
	}
	const [contentJson, commitJson] = await Promise.all([contentResult.json(), commitResult.json()]);
	const content = atob(contentJson.content);
	const lines = content.split("\n");
	return {
	lines: lines.slice(config.lineFrom - 1, config.lineTo),
	lineFrom: config.lineFrom,
	lineTo: config.lineTo,
	commit: config.commit,
	path: config.path,
	owner: config.owner,
	repo: config.repo,
	commitUrl: commitJson.html_url,
	status: "ok"
	}
	}

3. Display the said lines.

For that I'm using react-syntax-highlighter - so you'd need to be looking at how they're doing it for a pure js solution.

Realistically I'm probably not going to get around to implementing a pure markdown solution - until I need one.