Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add syntax highlighting support for ruby and erb #203

Merged
merged 9 commits into from Feb 22, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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 {
Copy link
Contributor

Choose a reason for hiding this comment

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

prism-react-rendered changed the github theme on v1.2.0 and it does not look right:

Before After
image image

So I decided to extract the previous version of the theme into this project to keep the docs consistent (keeping the Before style)

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