Skip to content

Commit

Permalink
Merge pull request #203 from primer/erb-syntax
Browse files Browse the repository at this point in the history
Add syntax highlighting support for ruby and erb
  • Loading branch information
colebemis committed Feb 22, 2021
2 parents a5db911 + 5709e7a commit afb67b4
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 10 deletions.
5 changes: 5 additions & 0 deletions .changeset/forty-cameras-peel.md
@@ -0,0 +1,5 @@
---
"@primer/gatsby-theme-doctocat": minor
---

Add syntax highlighting support for `ruby` and `erb` code examples
3 changes: 2 additions & 1 deletion theme/package.json
Expand Up @@ -53,7 +53,8 @@
"pkg-up": "^3.1.0",
"pluralize": "^8.0.0",
"preval.macro": "^3.0.0",
"prism-react-renderer": "^0.1.7",
"prism-react-renderer": "^1.2.0",
"prismjs": "^1.22.0",
"react-addons-text-content": "^0.0.4",
"react-element-to-jsx-string": "^14.0.3",
"react-focus-on": "^3.3.0",
Expand Down
8 changes: 5 additions & 3 deletions theme/src/components/code.js
@@ -1,6 +1,7 @@
import {Absolute, Box, Relative, Text} from '@primer/components'
import Highlight, {defaultProps} from 'prism-react-renderer'
import githubTheme from 'prism-react-renderer/themes/github'
import { Absolute, Box, Relative, Text } from '@primer/components'
import Highlight, { defaultProps } from 'prism-react-renderer'
import Prism from '../prism'
import githubTheme from '../github'
import React from 'react'
import ClipboardCopy from './clipboard-copy'
import LiveCode from './live-code'
Expand All @@ -20,6 +21,7 @@ function Code({className, children, live, noinline}) {
</Absolute>
<Highlight
{...defaultProps}
Prism={Prism}
code={code}
language={language}
theme={githubTheme}
Expand Down
2 changes: 1 addition & 1 deletion theme/src/components/live-code.js
@@ -1,6 +1,6 @@
import {Absolute, BorderBox, Flex, Relative, Text} from '@primer/components'
import htmlReactParser from 'html-react-parser'
import githubTheme from 'prism-react-renderer/themes/github'
import githubTheme from '../github'
import React, {useState} from 'react'
import reactElementToJsxString from 'react-element-to-jsx-string'
import {LiveEditor, LiveError, LivePreview, LiveProvider} from 'react-live'
Expand Down
74 changes: 74 additions & 0 deletions theme/src/github.js
@@ -0,0 +1,74 @@
export default {
plain: {
color: "#393A34",
backgroundColor: "#f6f8fa",
},
styles: [
{
types: ["comment", "prolog", "doctype", "cdata"],
style: {
color: "#999988",
fontStyle: "italic",
},
},
{
types: ["namespace"],
style: {
opacity: 0.7,
},
},
{
types: ["string", "attr-value"],
style: {
color: "#e3116c",
},
},
{
types: ["punctuation", "operator"],
style: {
color: "#393A34",
},
},
{
types: [
"entity",
"url",
"symbol",
"number",
"boolean",
"variable",
"constant",
"property",
"regex",
"inserted",
],
style: {
color: "#36acaa",
},
},
{
types: ["atrule", "keyword", "attr-name", "selector"],
style: {
color: "#00a4db",
},
},
{
types: ["function", "deleted", "tag"],
style: {
color: "#d73a49",
},
},
{
types: ["function-variable"],
style: {
color: "#6f42c1",
},
},
{
types: ["tag", "selector", "keyword"],
style: {
color: "#00009f",
},
},
],
};
27 changes: 27 additions & 0 deletions theme/src/prism.js
@@ -0,0 +1,27 @@
import Prism from 'prismjs/components/prism-core'

// Core languages
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-markup-templating';

// Supported languages
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-diff';
import 'prismjs/components/prism-go';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-markdown';
import 'prismjs/components/prism-yaml';

// JS like
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-tsx';

// Ruby like
import 'prismjs/components/prism-ruby';
import 'prismjs/components/prism-erb';

export default Prism
48 changes: 43 additions & 5 deletions yarn.lock
Expand Up @@ -4423,6 +4423,15 @@ cli-width@^3.0.0:
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==

clipboard@^2.0.0:
version "2.0.6"
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
dependencies:
good-listener "^1.2.2"
select "^1.1.2"
tiny-emitter "^2.0.0"

clipboardy@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"
Expand Down Expand Up @@ -5468,6 +5477,11 @@ delayed-stream@~1.0.0:
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=

delegate@^3.1.2:
version "3.2.0"
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==

delegates@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
Expand Down Expand Up @@ -7763,6 +7777,13 @@ globule@^1.0.0:
lodash "~4.17.10"
minimatch "~3.0.2"

good-listener@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
dependencies:
delegate "^3.1.2"

got@8.3.2:
version "8.3.2"
resolved "https://registry.yarnpkg.com/got/-/got-8.3.2.tgz#1d23f64390e97f776cac52e5b936e5f514d2e937"
Expand Down Expand Up @@ -12466,16 +12487,23 @@ preval.macro@^3.0.0:
dependencies:
babel-plugin-preval "^3.0.0"

prism-react-renderer@^0.1.7:
version "0.1.7"
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-0.1.7.tgz#dc273d0cb6e4a498ba0775094e9a8b01a3ad2eaa"
integrity sha512-EhnM0sYfLK103ASK0ViSv0rta//ZGB0dBA9TiFyOvA+zOj5peLmGEG01sLEDwl9sMe+gSqncInafBe1VFTCMvA==

prism-react-renderer@^1.0.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44"
integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug==

prism-react-renderer@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.2.0.tgz#5ad4f90c3e447069426c8a53a0eafde60909cdf4"
integrity sha512-GHqzxLYImx1iKN1jJURcuRoA/0ygCcNhfGw1IT8nPIMzarmKQ3Nc+JcG0gi8JXQzuh0C5ShE4npMIoqNin40hg==

prismjs@^1.22.0:
version "1.22.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.22.0.tgz#73c3400afc58a823dd7eed023f8e1ce9fd8977fa"
integrity sha512-lLJ/Wt9yy0AiSYBf212kK3mM5L8ycwlyTlSxHBAneXLR0nzFMlZ5y7riFPF3E33zXOF2IH95xdY5jIyZbM9z/w==
optionalDependencies:
clipboard "^2.0.0"

process-nextick-args@~2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
Expand Down Expand Up @@ -13913,6 +13941,11 @@ select-hose@^2.0.0:
resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=

select@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=

selfsigned@^1.10.7:
version "1.10.7"
resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b"
Expand Down Expand Up @@ -15243,6 +15276,11 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=

tiny-emitter@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==

tiny-warning@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
Expand Down

2 comments on commit afb67b4

@vercel
Copy link

@vercel vercel bot commented on afb67b4 Feb 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on afb67b4 Feb 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.