Add ability to load code from GitHub

This commit is contained in:
Marcus Blättermann 2022-11-25 04:43:07 +01:00
parent 55f3d1d245
commit 511b8eead2
No known key found for this signature in database
GPG Key ID: A1E1F04008AC450D
3 changed files with 12 additions and 6 deletions

View File

@ -43,7 +43,7 @@ function remarkCodeBlocks(userOptions = {}) {
firstLine.startsWith('%%GITHUB_')
) {
// GitHub URL
attrs.github = 'true'
attrs.github = node.value
}
// If it's a bash code block and single line, check for prompts
if (lang === 'bash') {

View File

@ -207,14 +207,13 @@ export class Code extends React.Component {
static defaultProps = {
lang: 'none',
executable: null,
github: false,
}
static propTypes = {
lang: PropTypes.string,
title: PropTypes.string,
executable: PropTypes.oneOf(['true', 'false', true, false, null]),
github: PropTypes.oneOf(['true', 'false', true, false, null]),
github: PropTypes.string,
prompt: PropTypes.string,
highlight: PropTypes.string,
className: PropTypes.string,
@ -246,7 +245,7 @@ export class Code extends React.Component {
const { Juniper } = this.state
if (github) {
return <GitHubCode url={children} className={ghClassNames} lang={lang} />
return <GitHubCode url={github} className={ghClassNames} lang={lang} />
}
if (!!executable && Juniper) {
return (

View File

@ -1,7 +1,13 @@
import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import highlightCode from 'gatsby-remark-prismjs/highlight-code.js'
import Prism from 'prismjs'
// We manually load all the languages that are needed, which are currently only those:
import 'prismjs/components/prism-json.min.js'
import 'prismjs/components/prism-python.min.js'
import 'prismjs/components/prism-yaml.min.js'
import 'prismjs/components/prism-ini.min.js'
import Icon from './icon'
import Link from './link'
@ -39,7 +45,8 @@ const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
}
}, [initialized, rawUrl, errorMsg])
const highlighted = lang === 'none' || !code ? code : highlightCode(lang, code)
const highlighted =
lang === 'none' || !code ? code : Prism.highlight(code, Prism.languages[lang], lang)
return (
<>