@redocly/theme 0.33.0 → 0.33.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/components/CodeBlock/styledVariables.js +2 -0
  2. package/lib/utils/highlight.js +27 -4
  3. package/lib/utils/theme-helpers.js +2 -0
  4. package/package.json +1 -1
  5. package/src/components/CodeBlock/styledVariables.ts +2 -0
  6. package/src/utils/highlight.ts +33 -4
  7. package/src/utils/theme-helpers.ts +2 -0
package/lib/components/CodeBlock/styledVariables.js CHANGED
@@ -86,6 +86,8 @@ exports.code = (0, styled_components_1.css) `
86
86
  --code-block-tokens-regex-color: var(--color-yellow-7); // @presenter Color
87
87
  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
88
88
  --code-block-tokens-deleted-color: var(--color-red-7); // @presenter Color
89
+ --code-block-tokens-class-name-color: var(--color-gold-7); // @presenter Color
90
+ --code-block-tokens-function-color: var(--color-gold-7); // @presenter Color
89
91
 
90
92
  // @tokens End
91
93
  `;
package/lib/utils/highlight.js CHANGED
@@ -62,6 +62,32 @@ Prism.languages.insertBefore('javascript', 'punctuation', {
62
62
  lookbehind: true,
63
63
  },
64
64
  }, undefined);
65
+ Prism.languages.markdoc = Object.assign(Object.assign({}, Prism.languages.markdown), { tag: {
66
+ pattern: /{%(.|\n)*?%}/i,
67
+ inside: {
68
+ keyword: {
69
+ pattern: /^({%\s*\/?)(\w*|-)*\b/i,
70
+ lookbehind: true,
71
+ },
72
+ id: /#(\w|-)*\b/,
73
+ string: /".*?"/,
74
+ equals: /=/,
75
+ number: /\b\d+\b/i,
76
+ variable: {
77
+ pattern: /\$[\w.]+/i,
78
+ inside: {
79
+ punctuation: /\./i,
80
+ },
81
+ },
82
+ function: /\b\w+(?=\()/,
83
+ punctuation: /({%|\/?%})/i,
84
+ boolean: /false|true/,
85
+ },
86
+ }, variable: {
87
+ pattern: /\$\w+/i,
88
+ }, function: {
89
+ pattern: /\b\w+(?=\()/i,
90
+ } });
65
91
  /**
66
92
  * map language names to Prism.js names
67
93
  */
@@ -88,10 +114,7 @@ exports.mapLang = mapLang;
88
114
  */
89
115
  function highlight(source, lang = DEFAULT_LANG) {
90
116
  lang = lang.toLowerCase();
91
- let grammar = Prism.languages[lang];
92
- if (!grammar) {
93
- grammar = Prism.languages[mapLang(lang)];
94
- }
117
+ const grammar = Prism.languages[lang] || Prism.languages[mapLang(lang)];
95
118
  return Prism.highlight(source.toString(), grammar, lang);
96
119
  }
97
120
  exports.highlight = highlight;
package/lib/utils/theme-helpers.js CHANGED
@@ -33,6 +33,8 @@ var Token;
33
33
  Token["Bold"] = "bold";
34
34
  Token["Italic"] = "italic";
35
35
  Token["Deleted"] = "deleted";
36
+ Token["ClassName"] = "class-name";
37
+ Token["Function"] = "function";
36
38
  })(Token || (Token = {}));
37
39
  const typographyProperties = Object.entries({
38
40
  fontSize: 'font-size',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.33.0",
3
+ "version": "0.33.1",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/components/CodeBlock/styledVariables.ts CHANGED
@@ -84,6 +84,8 @@ export const code = css`
84
84
  --code-block-tokens-regex-color: var(--color-yellow-7); // @presenter Color
85
85
  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
86
86
  --code-block-tokens-deleted-color: var(--color-red-7); // @presenter Color
87
+ --code-block-tokens-class-name-color: var(--color-gold-7); // @presenter Color
88
+ --code-block-tokens-function-color: var(--color-gold-7); // @presenter Color
87
89
 
88
90
  // @tokens End
89
91
  `;
package/src/utils/highlight.ts CHANGED
@@ -50,6 +50,38 @@ Prism.languages.insertBefore(
50
50
  undefined,
51
51
  );
52
52
 
53
+ Prism.languages.markdoc = {
54
+ ...Prism.languages.markdown,
55
+ tag: {
56
+ pattern: /{%(.|\n)*?%}/i,
57
+ inside: {
58
+ keyword: {
59
+ pattern: /^({%\s*\/?)(\w*|-)*\b/i,
60
+ lookbehind: true,
61
+ },
62
+ id: /#(\w|-)*\b/,
63
+ string: /".*?"/,
64
+ equals: /=/,
65
+ number: /\b\d+\b/i,
66
+ variable: {
67
+ pattern: /\$[\w.]+/i,
68
+ inside: {
69
+ punctuation: /\./i,
70
+ },
71
+ },
72
+ function: /\b\w+(?=\()/,
73
+ punctuation: /({%|\/?%})/i,
74
+ boolean: /false|true/,
75
+ },
76
+ },
77
+ variable: {
78
+ pattern: /\$\w+/i,
79
+ },
80
+ function: {
81
+ pattern: /\b\w+(?=\()/i,
82
+ },
83
+ };
84
+
53
85
  /**
54
86
  * map language names to Prism.js names
55
87
  */
@@ -78,10 +110,7 @@ export function mapLang(lang: string): string {
78
110
  */
79
111
  export function highlight(source: string | number | boolean, lang: string = DEFAULT_LANG): string {
80
112
  lang = lang.toLowerCase();
81
- let grammar = Prism.languages[lang];
82
- if (!grammar) {
83
- grammar = Prism.languages[mapLang(lang)];
84
- }
113
+ const grammar = Prism.languages[lang] || Prism.languages[mapLang(lang)];
85
114
  return Prism.highlight(source.toString(), grammar, lang);
86
115
  }
87
116
 
package/src/utils/theme-helpers.ts CHANGED
@@ -32,6 +32,8 @@ enum Token {
32
32
  Bold = 'bold',
33
33
  Italic = 'italic',
34
34
  Deleted = 'deleted',
35
+ ClassName = 'class-name',
36
+ Function = 'function',
35
37
  }
36
38
 
37
39
  const typographyProperties = Object.entries({