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_') firstLine.startsWith('%%GITHUB_')
) { ) {
// GitHub URL // GitHub URL
attrs.github = 'true' attrs.github = node.value
} }
// If it's a bash code block and single line, check for prompts // If it's a bash code block and single line, check for prompts
if (lang === 'bash') { if (lang === 'bash') {

View File

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

View File

@ -1,7 +1,13 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import classNames from 'classnames' 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 Icon from './icon'
import Link from './link' import Link from './link'
@ -39,7 +45,8 @@ const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
} }
}, [initialized, rawUrl, errorMsg]) }, [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 ( return (
<> <>