Skip to content

Commit

Permalink
fix: Make syntax highlighting same for MD code blocks and code in a C…
Browse files Browse the repository at this point in the history 
…anvas (#397)
  • Loading branch information
@hidde
hidde authored Nov 28, 2023
1 parent 5892c6a commit f20656d
Show file tree
Hide file tree
Showing 5 changed files with 347 additions and 65 deletions.
10 changes: 10 additions & 0 deletions docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

const navbar = require('./navConfig');
const footer = require('./footerConfig');
const nldsPrism = require('./nldsPrism');

/** @type {import('@docusaurus/types').Config} */
const config = {
Expand Down Expand Up @@ -47,6 +48,15 @@ const config = {
themeConfig: {
navbar,
footer,
prism: {
theme: {
plain: {
color: 'var(--nlds-code-block-color)',
backgroundColor: 'var(--nlds-code-block-background-color)',
},
styles: nldsPrism,
},
},
docs: {
sidebar: {
hideable: true,
Expand Down
195 changes: 195 additions & 0 deletions nldsPrism.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
module.exports = [
{
types: ['comment'],
style: {
color: 'var(--nlds-code-block-comment-color)',
fontStyle: 'var(--nlds-code-block-comment-font-style)',
},
},
{
types: ['prolog'],
style: {
color: 'var(--nlds-code-block-prolog-color)',
fontStyle: 'var(--nlds-code-block-prolog-font-style)',
},
},
{
types: ['cdata'],
style: {
color: 'var(--nlds-code-block-cdata-color)',
fontStyle: 'var(--nlds-code-block-cdata-font-style)',
},
},
{
types: ['punctuation'],
style: {
color: 'var(--nlds-code-block-punctuation-color)',
},
},
{
types: ['deleted'],
style: {
color: 'var(--nlds-code-block-deleted-color)',
fontStyle: 'var(--nlds-code-block-deleted-font-style)',
},
},
{
types: ['symbol'],
style: {
color: 'var(--nlds-code-block-symbol-color)',
},
},
{
types: ['property'],
style: {
color: 'var(--nlds-code-block-property-color)',
},
},
{
types: ['tag'],
style: {
color: 'var(--nlds-code-block-tag-color)',
},
},
{
types: ['operator'],
style: {
color: 'var(--nlds-code-block-operator-color)',
},
},
{
types: ['keyword'],
style: {
color: 'var(--nlds-code-block-keyword-color)',
},
},
{
types: ['boolean'],
style: {
color: 'var(--nlds-code-block-boolean-color)',
},
},
{
types: ['number'],
style: {
color: 'var(--nlds-code-block-number-color)',
},
},
{
types: ['constant'],
style: {
color: 'var(--nlds-code-block-constant-color)',
},
},
{
types: ['function'],
style: {
color: 'var(--nlds-code-block-function-color)',
},
},
{
types: ['builtin'],
style: {
color: 'var(--nlds-code-block-builtin-color)',
},
},
{
types: ['char'],
style: {
color: 'var(--nlds-code-block-char-color)',
},
},
{
types: ['selector'],
style: {
color: 'var(--nlds-code-block-selector-color)',
fontStyle: 'var(--nlds-code-block-selector-font-style)',
},
},
{
types: ['doctype'],
style: {
color: 'var(--nlds-code-block-doctype-color)',
fontStyle: 'var(--nlds-code-block-doctype-font-style)',
},
},
{
types: ['attr-name'],
style: {
color: 'var(--nlds-code-block-attr-name-color)',
fontStyle: 'var(--nlds-code-block-attr-name-font-style)',
},
},
{
types: ['inserted'],
style: {
color: 'var(--nlds-code-block-inserted-color)',
fontStyle: 'var(--nlds-code-block-inserted-font-style)',
},
},
{
types: ['string'],
style: {
color: 'var(--nlds-code-block-string-color)',
},
},
{
types: ['url'],
style: { color: 'var(--nlds-code-block-url-color)' },
},
{
types: ['entity'],
style: {
color: 'var(--nlds-code-block-entity-color)',
},
},
{
types: ['class-name'],
style: {
color: 'var(--nlds-code-block-class-name-color)',
},
},
{
types: ['atrule'],
style: {
color: 'var(--nlds-code-block-atrule-color)',
},
},
{
types: ['attr-value'],
style: {
color: 'var(--nlds-code-block-attr-value-color)',
},
},
{
types: ['regex'],
style: {
color: 'var(--nlds-code-block-regex-color)',
},
},
{
types: ['important'],
style: {
color: 'var(--nlds-code-block-important-color)',
fontWeight: 'bold',
},
},
{
types: ['variable'],
style: {
color: 'var(--nlds-code-block-variable-color)',
},
},
{
types: ['bold'],
style: {
fontWeight: 'bold',
},
},
{
types: ['italic'],
style: {
fontStyle: 'italic',
},
},
];
62 changes: 0 additions & 62 deletions src/components/Canvas/Canvas.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,68 +17,6 @@
padding: 0;
}

.nlds-canvas__code-block {
--nlds-code-block-code-color: #c5c8c6;
--nlds-code-block-color: #fff;
--nlds-code-block-font-family: "Fira Code", "Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", monospace;
--nlds-code-block-tab-size: 4;
--nlds-code-block-tab-size: 4;
--nlds-code-block-tab-size: 4;
--nlds-code-block-hyphens: none;
--nlds-code-block-hyphens: none;
--nlds-code-block-hyphens: none;
--nlds-code-block-hyphens: none;
--nlds-code-block-padding-inline-start: 1em;
--nlds-code-block-padding-inline-end: 1em;
--nlds-code-block-padding-block-start: 1em;
--nlds-code-block-padding-block-end: 1em;
--nlds-code-block-margin-inline-start: 0;
--nlds-code-block-margin-inline-end: 0;
--nlds-code-block-margin-inline-start: 0;
--nlds-code-block-margin-inline-end: 0;
--nlds-code-block-background-color: #011627;
--nlds-code-block-selected-background-color: rgba(29, 59, 83, 0.99);
--nlds-code-block-comment-color: rgb(99, 119, 119);
--nlds-code-block-comment-font-style: italic;
--nlds-code-block-prolog-color: rgb(99, 119, 119);
--nlds-code-block-prolog-font-style: italic;
--nlds-code-block-cdata-color: rgb(99, 119, 119);
--nlds-code-block-cdata-font-style: italic;
--nlds-code-block-punctuation-color: rgb(199, 146, 234);
--nlds-code-block-namespace-color: rgb(178, 204, 214);
--nlds-code-block-deleted-color: rgba(239, 83, 80, 0.56);
--nlds-code-block-deleted-font-style: italic;
--nlds-code-block-symbol-color: rgb(128, 203, 196);
--nlds-code-block-property-color: rgb(128, 203, 196);
--nlds-code-block-tag-color: rgb(127, 219, 202);
--nlds-code-block-operator-color: rgb(127, 219, 202);
--nlds-code-block-boolean-color: rgb(255, 88, 116);
--nlds-code-block-number-color: rgb(247, 140, 108);
--nlds-code-block-constant-color: rgb(130, 170, 255);
--nlds-code-block-function-color: rgb(130, 170, 255);
--nlds-code-block-builtin-color: rgb(130, 170, 255);
--nlds-code-block-char-color: rgb(130, 170, 255);
--nlds-code-block-selector-color: rgb(199, 146, 234);
--nlds-code-block-selector-font-style: italic;
--nlds-code-block-doctype-color: rgb(199, 146, 234);
--nlds-code-block-doctype-font-style: italic;
--nlds-code-block-attr-name-color: rgb(173, 219, 103);
--nlds-code-block-attr-name-font-style: italic;
--nlds-code-block-inserted-color: rgb(173, 219, 103);
--nlds-code-block-inserted-font-style: italic;
--nlds-code-block-string-color: rgb(173, 219, 103);
--nlds-code-block-url-color: rgb(173, 219, 103);
--nlds-code-block-entity-color: rgb(173, 219, 103);
--nlds-code-block-css-token-color: rgb(173, 219, 103);
--nlds-code-block-style-token-color: rgb(173, 219, 103);
--nlds-code-block-class-name-color: rgb(255, 203, 139);
--nlds-code-block-atrule-color: rgb(255, 203, 139);
--nlds-code-block-attr-value-color: rgb(255, 203, 139);
--nlds-code-block-regex-color: rgb(214, 222, 235);
--nlds-code-block-important-color: rgb(214, 222, 235);
--nlds-code-block-variable-color: rgb(214, 222, 235);
}

.nlds-canvas__code-block--user-select-none {
user-select: none;
cursor: not-allowed;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Canvas/PrismStyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const PrismStyle = {
whiteSpace: 'pre',
wordSpacing: 'normal',
wordBreak: 'normal',
lineHeight: 'var(nlds-code-block-line-height, 1.5)',
lineHeight: 'var(--nlds-code-block-line-height, 1.5)',
MozTabSize: 'var(--nlds-code-block-tab-size, 4)',
OTabSize: 'var(--nlds-code-block-tab-size, 4)',
tabSize: 'var(--nlds-code-block-tab-size, 4)',
Expand All @@ -24,8 +24,8 @@ export const PrismStyle = {
wordSpacing: 'normal',
wordBreak: 'normal',
wordWrap: 'normal',
lineHeight: 'var(nlds-code-block-line-height, 1.5)',
fontSize: 'var(nlds-code-block-font-size, 1em)',
lineHeight: 'var(--nlds-code-block-line-height, 1.5)',
fontSize: 'var(--nlds-code-block-font-size, 1em)',
MozTabSize: 'var(--nlds-code-block-tab-size, 4)',
OTabSize: 'var(--nlds-code-block-tab-size, 4)',
tabSize: 'var(--nlds-code-block-tab-size, 4)',
Expand Down
Loading

1 comment on commit f20656d

@vercel
Copy link

@vercel vercel bot commented on f20656d Nov 28, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

documentatie – ./

documentatie.vercel.app
documentatie-git-main-nl-design-system.vercel.app
documentatie-nl-design-system.vercel.app

Please sign in to comment.