@redocly/theme 0.45.1 → 0.45.2-rc.0

package/lib/components/CodeBlock/CodeBlock.js

@@ -37,7 +37,15 @@ const CodeBlockControls_1 = require("../../components/CodeBlock/CodeBlockControl
 function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, children, }) {
     var _a, _b, _c, _d, _e, _f;
     const [sourceCode, setSourceCode] = (0, react_1.useState)((_c = (source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource)))) !== null && _c !== void 0 ? _c : '');
-    const highlightedCode = highlightedHtml || (children ? null : (0, utils_1.highlight)(sourceCode, lang));
+    const { useCodeHighlight } = (0, hooks_1.useThemeHooks)();
+    const { highlight } = useCodeHighlight() || {};
+    const highlightedCode = highlightedHtml
+        ? withLineNumbers
+            ? (0, utils_1.addLineNumbers)(highlightedHtml, startLineNumber)
+            : highlightedHtml
+        : children
+            ? null
+            : highlight === null || highlight === void 0 ? void 0 : highlight(sourceCode, lang, { withLineNumbers, startLineNumber });
     // The same initial value should be returned for ssr and frontend to avoid issues
     // Because we don't have session storage in ssr and can't get the security details there
     // Issue for more details https://github.com/Redocly/reference-docs/issues/888
@@ -54,11 +62,9 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
     return (react_1.default.createElement(CodeBlockWrapper, { "data-component-name": "CodeBlock/CodeBlock", className: className },
         react_1.default.createElement(ContainerWrapper, null,
             react_1.default.createElement(CodeBlockControls_1.CodeBlockControls, { tabs: tabs, className: header === null || header === void 0 ? void 0 : header.className, title: header === null || header === void 0 ? void 0 : header.title, controls: controls }),
-            react_1.default.createElement(CodeBlockContainer_1.CodeBlockContainer, { ref: codeBlockRef, className: withLineNumbers ? 'line-numbers' : '', dangerouslySetInnerHTML: highlightedCode
+            react_1.default.createElement(CodeBlockContainer_1.CodeBlockContainer, { ref: codeBlockRef, withLineNumbers: withLineNumbers, dangerouslySetInnerHTML: highlightedCode
                     ? {
-                        __html: withLineNumbers
-                            ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
-                            : highlightedCode,
+                        __html: highlightedCode,
                     }
                     : undefined, suppressHydrationWarning // TODO: investigate issue
                 : true, "data-testid": dataTestId, hideCodeColors: hideCodeColors, maxHeight: codeBlockMaxHeight, wrapContents: wrapContents, tabIndex: 0 }, children),

package/lib/components/CodeBlock/CodeBlockContainer.d.ts

@@ -4,7 +4,7 @@ export type CodeBlockContainerProps = PropsWithChildren<{
     maxHeight?: string;
     wrapContents?: boolean;
     ref?: (instance: HTMLPreElement | null) => void;
-    className?: string;
+    withLineNumbers?: boolean;
     dangerouslySetInnerHTML?: {
         __html: string;
     };

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -127,29 +127,243 @@ const CodeBlockContainerComponent = styled_components_1.default.pre `
     cursor: help;
   }
 
-  .code-line {
-    &:before {
-      content: attr(data-line-number);
-      display: inline-block;
-      min-width: 2em;
-      padding-right: 0.8em;
-      text-align: right;
-      pointer-events: none;
-      user-select: none;
-    }
+  .line-number {
+    display: inline-block;
+    min-width: 2.5em;
+    padding-right: 0.8em;
+    text-align: right;
+    pointer-events: none;
+    user-select: none;
   }
 
   .highlighted {
     background: var(--tag-basic-bg-color);
   }
 
+  /*
+  * Shiki styles
+   */
+
+  .line {
+    display: block;
+  }
+
+  .has-diff {
+    > .line {
+      &:before {
+        content: ' ';
+        display: inline-block;
+        min-width: 1em;
+        padding-right: 0.4em;
+        text-align: right;
+        pointer-events: none;
+        user-select: none;
+      }
+    }
+  }
+
+  .diff {
+    &.add {
+      background: var(--color-grass-2);
+      &:before {
+        content: '+';
+      }
+    }
+    &.remove {
+      background: var(--color-red-2);
+
+      &:before {
+        content: '-';
+      }
+    }
+  }
+
+  .highlighted-word {
+    background: var(--color-carrot-2);
+    border: 1px solid var(--color-carrot-5);
+    border-radius: 4px;
+  }
+
+  .has-focused {
+    .line {
+      opacity: 0.7;
+      filter: blur(0.095rem);
+      transition:
+        filter 0.35s,
+        opacity 0.35s;
+      &.focused {
+        opacity: 1;
+        filter: blur(0);
+      }
+    }
+
+    &:hover {
+      .line {
+        opacity: 1;
+        filter: blur(0);
+      }
+    }
+  }
+
+  /*
+  * Tree view styles
+   */
+
+  .tree-view-line {
+    display: flex;
+  }
+
+  .tree-view-branch {
+    color: var(--code-block-tree-view-lines-color);
+  }
+
+  .tree-view-file {
+    display: inline-flex;
+    &::before {
+      content: '\\ea01';
+      margin-right: 0.5rem;
+      font-family: 'TreeViewIcons';
+    }
+
+    &.no-file {
+      &::before {
+        content: '';
+        margin-right: 0;
+      }
+    }
+
+    &.ext-folder {
+      &::before {
+        content: '\\ea02';
+      }
+    }
+
+    &.ext-img,
+    &.ext-png,
+    &.ext-jpg,
+    &.ext-jpeg,
+    &.ext-gif,
+    &.ext-svg {
+      &::before {
+        content: '\\ea03';
+      }
+    }
+
+    &.ext-mp2,
+    &.ext-mp3,
+    &.ext-wav,
+    &.ext-ogg,
+    &.ext-flac {
+      &::before {
+        content: '\\ea04';
+        margin-right: 0.5rem;
+      }
+    }
+
+    &.ext-mp4,
+    &.ext-mkv,
+    &.ext-avi,
+    &.ext-mov,
+    &.ext-wmv,
+    &.ext-flv {
+      &::before {
+        content: '\\ea05';
+        margin-right: 0.5rem;
+      }
+    }
+
+    &.ext-txt,
+    &.ext-text,
+    &.ext-md,
+    &.ext-markdown {
+      &::before {
+        content: '\\ea06';
+        margin-right: 0.5rem;
+      }
+    }
+
+    &.ext-js,
+    &.ext-ts,
+    &.ext-jsx,
+    &.ext-tsx,
+    &.ext-json,
+    &.ext-yaml,
+    &.ext-yml,
+    &.ext-xml,
+    &.ext-html,
+    &.ext-css,
+    &.ext-scss,
+    &.ext-less,
+    &.ext-sass,
+    &.ext-java,
+    &.ext-c,
+    &.ext-cpp,
+    &.ext-cs,
+    &.ext-php,
+    &.ext-py,
+    &.ext-rb,
+    &.ext-go,
+    &.ext-swift,
+    &.ext-sql,
+    &.ext-perl,
+    &.ext-lua,
+    &.ext-scala,
+    &.ext-sh {
+      &::before {
+        content: '\\ea07';
+        margin-right: 0.5rem;
+      }
+    }
+
+    &.ext-zip,
+    &.ext-rar,
+    &.ext-tar,
+    &.ext-gz,
+    &.ext-iso {
+      &::before {
+        content: '\\ea08';
+      }
+    }
+
+    &.ext-pdf,
+    &.ext-PDF {
+      &::before {
+        content: '\\ea09';
+      }
+    }
+
+    &.ext-excel,
+    &.ext-xls,
+    &.ext-xlsx {
+      &::before {
+        content: '\\ea0a';
+      }
+    }
+
+    &.ext-powerpoint,
+    &.ext-ppt,
+    &.ext-pptx {
+      &::before {
+        content: '\\ea0b';
+      }
+    }
+
+    &.ext-doc,
+    &.ext-docx,
+    &.ext-rtf {
+      &::before {
+        content: '\\ea0c';
+      }
+    }
+  }
+
   ${(0, utils_1.generateCodeBlockTokens)()}
 
   ${({ hideCodeColors }) => hideCodeColors &&
     (0, styled_components_1.css) `
-      .code-line:not(.highlighted),
-      .code-line:not(.highlighted) > span,
-      .code-line:not(.highlighted) > span > span {
+      .line-number:not(.highlighted),
+      .line-number:not(.highlighted) > span,
+      .line-number:not(.highlighted) > span > span {
         color: grey;
       }
     `}

package/lib/components/CodeBlock/variables.js

@@ -3,6 +3,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.code = void 0;
 const styled_components_1 = require("styled-components");
 exports.code = (0, styled_components_1.css) `
+  /**
+    * Tree view icons font
+    */
+  @font-face {
+    font-family: 'TreeViewIcons';
+    /**
+    * Use the following escape sequences to refer to a specific icon:
+    *
+    * - \\ea01 file
+    * - \\ea02 folder
+    * - \\ea03 image
+    * - \\ea04 audio
+    * - \\ea05 video
+    * - \\ea06 text
+    * - \\ea07 code
+    * - \\ea08 archive
+    * - \\ea09 pdf
+    * - \\ea0a excel
+    * - \\ea0b powerpoint
+    * - \\ea0c word
+    */
+    src: url('data:application/font-woff;base64,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') format('woff');
+  }
+  
   /**
     * @tokens Code base styles
     */
@@ -90,6 +114,12 @@ exports.code = (0, styled_components_1.css) `
   --code-block-tokens-class-name-color: var(--color-carrot-7); // @presenter Color
   --code-block-tokens-function-color: var(--color-carrot-7); // @presenter Color
 
+  /**
+    * @tokens Code Block tree view
+   */
+  --code-block-tree-view-icon-font-family: 'TreeViewIcons'; // @presenter FontFamily
+  --code-block-tree-view-lines-color: var(--border-color-primary); // @presenter Color
+
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/core/types/hooks.d.ts

@@ -95,6 +95,12 @@ export type ThemeHooks = {
     };
     useUserTeams: () => string[];
     usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
+    useCodeHighlight: () => {
+        highlight: (code: string, language: string | undefined, { withLineNumbers, startLineNumber }: {
+            withLineNumbers?: boolean;
+            startLineNumber?: number;
+        }) => string;
+    };
 };
 export type L10nConfig = {
     currentLocale: string;

package/lib/core/utils/add-line-numbers.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @param highlightedCode - A string with new line breaks; the line numbers will be added before each line.
+ * @param start - The number to start the line numbering from; default is 1
+ * @returns A string with line numbers added before each line
+ */
+export declare function addLineNumbers(highlightedCode: string, start?: number): string;

package/lib/core/utils/add-line-numbers.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addLineNumbers = addLineNumbers;
+const NEW_LINE_EXP = /\n(?!$)/g;
+/**
+ * @param highlightedCode - A string with new line breaks; the line numbers will be added before each line.
+ * @param start - The number to start the line numbering from; default is 1
+ * @returns A string with line numbers added before each line
+ */
+function addLineNumbers(highlightedCode, start = 1) {
+    console.log('from addLineNumbers ---> ', highlightedCode);
+    const codeLines = highlightedCode.split(NEW_LINE_EXP);
+    return codeLines
+        .map((line, i) => {
+        return `<span class='line-number'>${start + i}</span>${line}`;
+    })
+        .join('\n');
+}
+//# sourceMappingURL=add-line-numbers.js.map

package/lib/core/utils/index.d.ts

@@ -1,6 +1,6 @@
 export * from '../../core/utils/clipboard-service';
 export * from '../../core/utils/css-variables';
-export * from '../../core/utils/highlight';
+export * from '../../core/utils/add-line-numbers';
 export * from '../../core/utils/media-css';
 export * from '../../core/utils/theme-helpers';
 export * from '../../core/utils/class-names';

package/lib/core/utils/index.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../core/utils/clipboard-service"), exports);
 __exportStar(require("../../core/utils/css-variables"), exports);
-__exportStar(require("../../core/utils/highlight"), exports);
+__exportStar(require("../../core/utils/add-line-numbers"), exports);
 __exportStar(require("../../core/utils/media-css"), exports);
 __exportStar(require("../../core/utils/theme-helpers"), exports);
 __exportStar(require("../../core/utils/class-names"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.45.1",
+  "version": "0.45.2-rc.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -27,7 +27,6 @@
   "peerDependencies": {
     "@markdoc/markdoc": "0.4.0",
     "lodash.throttle": "^4.1.1",
-    "prismjs": "^1.28.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.21.1",
@@ -44,7 +43,6 @@
     "@types/jest-when": "3.5.5",
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "18.19.3",
-    "@types/prismjs": "1.26.4",
     "@types/react": "18.3.9",
     "@types/react-dom": "18.2.25",
     "@types/styled-components": "5.1.34",

package/src/components/CodeBlock/CodeBlock.tsx

@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
 import type { ReportDialogProps } from '@redocly/theme/components/Feedback/ReportDialog';
 
-import { highlight, addLineNumbers } from '@redocly/theme/core/utils';
-import { useModalScrollLock, useReportDialog } from '@redocly/theme/core/hooks';
+import { addLineNumbers } from '@redocly/theme/core/utils';
+import { useModalScrollLock, useReportDialog, useThemeHooks } from '@redocly/theme/core/hooks';
 import { ReportDialog } from '@redocly/theme/components/Feedback/ReportDialog';
 import { CodeBlockContainer } from '@redocly/theme/components/CodeBlock/CodeBlockContainer';
 import { CodeBlockControls } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
@@ -68,8 +68,16 @@ export function CodeBlock({
   const [sourceCode, setSourceCode] = useState<string>(
     (source || externalSource?.sample?.get?.(externalSource)) ?? '',
   );
+  const { useCodeHighlight } = useThemeHooks();
+  const { highlight } = useCodeHighlight() || {};
 
-  const highlightedCode = highlightedHtml || (children ? null : highlight(sourceCode, lang));
+  const highlightedCode = highlightedHtml
+    ? withLineNumbers
+      ? addLineNumbers(highlightedHtml, startLineNumber)
+      : highlightedHtml
+    : children
+      ? null
+      : highlight?.(sourceCode, lang, { withLineNumbers, startLineNumber });
 
   // The same initial value should be returned for ssr and frontend to avoid issues
   // Because we don't have session storage in ssr and can't get the security details there
@@ -102,13 +110,11 @@ export function CodeBlock({
         />
         <CodeBlockContainer
           ref={codeBlockRef}
-          className={withLineNumbers ? 'line-numbers' : ''}
+          withLineNumbers={withLineNumbers}
           dangerouslySetInnerHTML={
             highlightedCode
               ? {
-                  __html: withLineNumbers
-                    ? addLineNumbers(highlightedCode, startLineNumber)
-                    : highlightedCode,
+                  __html: highlightedCode,
                 }
               : undefined
           }

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -8,7 +8,7 @@ export type CodeBlockContainerProps = PropsWithChildren<{
   maxHeight?: string;
   wrapContents?: boolean;
   ref?: (instance: HTMLPreElement | null) => void;
-  className?: string;
+  withLineNumbers?: boolean;
   dangerouslySetInnerHTML?: {
     __html: string;
   };
@@ -117,30 +117,244 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
     cursor: help;
   }
 
-  .code-line {
-    &:before {
-      content: attr(data-line-number);
-      display: inline-block;
-      min-width: 2em;
-      padding-right: 0.8em;
-      text-align: right;
-      pointer-events: none;
-      user-select: none;
-    }
+  .line-number {
+    display: inline-block;
+    min-width: 2.5em;
+    padding-right: 0.8em;
+    text-align: right;
+    pointer-events: none;
+    user-select: none;
   }
 
   .highlighted {
     background: var(--tag-basic-bg-color);
   }
 
+  /*
+  * Shiki styles
+   */
+
+  .line {
+    display: block;
+  }
+
+  .has-diff {
+    > .line {
+      &:before {
+        content: ' ';
+        display: inline-block;
+        min-width: 1em;
+        padding-right: 0.4em;
+        text-align: right;
+        pointer-events: none;
+        user-select: none;
+      }
+    }
+  }
+
+  .diff {
+    &.add {
+      background: var(--color-grass-2);
+      &:before {
+        content: '+';
+      }
+    }
+    &.remove {
+      background: var(--color-red-2);
+
+      &:before {
+        content: '-';
+      }
+    }
+  }
+
+  .highlighted-word {
+    background: var(--color-carrot-2);
+    border: 1px solid var(--color-carrot-5);
+    border-radius: 4px;
+  }
+
+  .has-focused {
+    .line {
+      opacity: 0.7;
+      filter: blur(0.095rem);
+      transition:
+        filter 0.35s,
+        opacity 0.35s;
+      &.focused {
+        opacity: 1;
+        filter: blur(0);
+      }
+    }
+
+    &:hover {
+      .line {
+        opacity: 1;
+        filter: blur(0);
+      }
+    }
+  }
+
+  /*
+  * Tree view styles
+   */
+
+  .tree-view-line {
+    display: flex;
+  }
+
+  .tree-view-branch {
+    color: var(--code-block-tree-view-lines-color);
+  }
+
+  .tree-view-file {
+    display: inline-flex;
+    &::before {
+      content: '\\ea01';
+      margin-right: 0.5rem;
+      font-family: 'TreeViewIcons';
+    }
+
+    &.no-file {
+      &::before {
+        content: '';
+        margin-right: 0;
+      }
+    }
+
+    &.ext-folder {
+      &::before {
+        content: '\\ea02';
+      }
+    }
+
+    &.ext-img,
+    &.ext-png,
+    &.ext-jpg,
+    &.ext-jpeg,
+    &.ext-gif,
+    &.ext-svg {
+      &::before {
+        content: '\\ea03';
+      }
+    }
+
+    &.ext-mp2,
+    &.ext-mp3,
+    &.ext-wav,
+    &.ext-ogg,
+    &.ext-flac {
+      &::before {
+        content: '\\ea04';
+        margin-right: 0.5rem;
+      }
+    }
+
+    &.ext-mp4,
+    &.ext-mkv,
+    &.ext-avi,
+    &.ext-mov,
+    &.ext-wmv,
+    &.ext-flv {
+      &::before {
+        content: '\\ea05';
+        margin-right: 0.5rem;
+      }
+    }
+
+    &.ext-txt,
+    &.ext-text,
+    &.ext-md,
+    &.ext-markdown {
+      &::before {
+        content: '\\ea06';
+        margin-right: 0.5rem;
+      }
+    }
+
+    &.ext-js,
+    &.ext-ts,
+    &.ext-jsx,
+    &.ext-tsx,
+    &.ext-json,
+    &.ext-yaml,
+    &.ext-yml,
+    &.ext-xml,
+    &.ext-html,
+    &.ext-css,
+    &.ext-scss,
+    &.ext-less,
+    &.ext-sass,
+    &.ext-java,
+    &.ext-c,
+    &.ext-cpp,
+    &.ext-cs,
+    &.ext-php,
+    &.ext-py,
+    &.ext-rb,
+    &.ext-go,
+    &.ext-swift,
+    &.ext-sql,
+    &.ext-perl,
+    &.ext-lua,
+    &.ext-scala,
+    &.ext-sh {
+      &::before {
+        content: '\\ea07';
+        margin-right: 0.5rem;
+      }
+    }
+
+    &.ext-zip,
+    &.ext-rar,
+    &.ext-tar,
+    &.ext-gz,
+    &.ext-iso {
+      &::before {
+        content: '\\ea08';
+      }
+    }
+
+    &.ext-pdf,
+    &.ext-PDF {
+      &::before {
+        content: '\\ea09';
+      }
+    }
+
+    &.ext-excel,
+    &.ext-xls,
+    &.ext-xlsx {
+      &::before {
+        content: '\\ea0a';
+      }
+    }
+
+    &.ext-powerpoint,
+    &.ext-ppt,
+    &.ext-pptx {
+      &::before {
+        content: '\\ea0b';
+      }
+    }
+
+    &.ext-doc,
+    &.ext-docx,
+    &.ext-rtf {
+      &::before {
+        content: '\\ea0c';
+      }
+    }
+  }
+
   ${generateCodeBlockTokens()}
 
   ${({ hideCodeColors }) =>
     hideCodeColors &&
     css`
-      .code-line:not(.highlighted),
-      .code-line:not(.highlighted) > span,
-      .code-line:not(.highlighted) > span > span {
+      .line-number:not(.highlighted),
+      .line-number:not(.highlighted) > span,
+      .line-number:not(.highlighted) > span > span {
         color: grey;
       }
     `}

package/src/components/CodeBlock/variables.ts

@@ -1,6 +1,30 @@
 import { css } from 'styled-components';
 
 export const code = css`
+  /**
+    * Tree view icons font
+    */
+  @font-face {
+    font-family: 'TreeViewIcons';
+    /**
+    * Use the following escape sequences to refer to a specific icon:
+    *
+    * - \\ea01 file
+    * - \\ea02 folder
+    * - \\ea03 image
+    * - \\ea04 audio
+    * - \\ea05 video
+    * - \\ea06 text
+    * - \\ea07 code
+    * - \\ea08 archive
+    * - \\ea09 pdf
+    * - \\ea0a excel
+    * - \\ea0b powerpoint
+    * - \\ea0c word
+    */
+    src: url('data:application/font-woff;base64,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') format('woff');
+  }
+  
   /**
     * @tokens Code base styles
     */
@@ -88,5 +112,11 @@ export const code = css`
   --code-block-tokens-class-name-color: var(--color-carrot-7); // @presenter Color
   --code-block-tokens-function-color: var(--color-carrot-7); // @presenter Color
 
+  /**
+    * @tokens Code Block tree view
+   */
+  --code-block-tree-view-icon-font-family: 'TreeViewIcons'; // @presenter FontFamily
+  --code-block-tree-view-lines-color: var(--border-color-primary); // @presenter Color
+
   // @tokens End
 `;

package/src/core/types/hooks.ts

@@ -109,6 +109,13 @@ export type ThemeHooks = {
   useTelemetry: () => { send(action: TelemetryEvent, data: unknown): void };
   useUserTeams: () => string[];
   usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
+  useCodeHighlight: () => {
+    highlight: (
+      code: string,
+      language: string | undefined,
+      { withLineNumbers, startLineNumber }: { withLineNumbers?: boolean; startLineNumber?: number },
+    ) => string;
+  };
 };
 
 export type L10nConfig = {

package/src/core/utils/add-line-numbers.ts

@@ -0,0 +1,17 @@
+const NEW_LINE_EXP = /\n(?!$)/g;
+
+/**
+ * @param highlightedCode - A string with new line breaks; the line numbers will be added before each line.
+ * @param start - The number to start the line numbering from; default is 1
+ * @returns A string with line numbers added before each line
+ */
+export function addLineNumbers(highlightedCode: string, start = 1): string {
+  console.log('from addLineNumbers ---> ', highlightedCode);
+  const codeLines = highlightedCode.split(NEW_LINE_EXP);
+
+  return codeLines
+    .map((line, i) => {
+      return `<span class='line-number'>${start + i}</span>${line}`;
+    })
+    .join('\n');
+}

package/src/core/utils/index.ts

@@ -1,6 +1,6 @@
 export * from '@redocly/theme/core/utils/clipboard-service';
 export * from '@redocly/theme/core/utils/css-variables';
-export * from '@redocly/theme/core/utils/highlight';
+export * from '@redocly/theme/core/utils/add-line-numbers';
 export * from '@redocly/theme/core/utils/media-css';
 export * from '@redocly/theme/core/utils/theme-helpers';
 export * from '@redocly/theme/core/utils/class-names';

package/lib/core/utils/highlight.d.ts

@@ -1,35 +0,0 @@
-import 'prismjs/components/prism-bash.js';
-import 'prismjs/components/prism-c.js';
-import 'prismjs/components/prism-clike.js';
-import 'prismjs/components/prism-coffeescript.js';
-import 'prismjs/components/prism-cpp.js';
-import 'prismjs/components/prism-csharp.js';
-import 'prismjs/components/prism-go.js';
-import 'prismjs/components/prism-http.js';
-import 'prismjs/components/prism-java.js';
-import 'prismjs/components/prism-lua.js';
-import 'prismjs/components/prism-markdown.js';
-import 'prismjs/components/prism-markup-templating.js';
-import 'prismjs/components/prism-markup.js';
-import 'prismjs/components/prism-objectivec.js';
-import 'prismjs/components/prism-perl.js';
-import 'prismjs/components/prism-php.js';
-import 'prismjs/components/prism-python.js';
-import 'prismjs/components/prism-ruby.js';
-import 'prismjs/components/prism-scala.js';
-import 'prismjs/components/prism-sql.js';
-import 'prismjs/components/prism-swift.js';
-import 'prismjs/components/prism-graphql.js';
-import 'prismjs/plugins/treeview/prism-treeview.js';
-/**
- * map language names to Prism.js names
- */
-export declare function mapLang(lang: string): string;
-/**
- * Highlight source code string using Prism.js
- * @param source source code to highlight
- * @param lang highlight language
- * @return highlighted source code as **html string**
- */
-export declare function highlight(source: string | number | boolean, lang?: string): string;
-export declare function addLineNumbers(highlightedCode: string, start?: number): string;

package/lib/core/utils/highlight.js

@@ -1,129 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapLang = mapLang;
-exports.highlight = highlight;
-exports.addLineNumbers = addLineNumbers;
-const Prism = __importStar(require("prismjs"));
-require("prismjs/components/prism-bash.js");
-require("prismjs/components/prism-c.js");
-require("prismjs/components/prism-clike.js");
-require("prismjs/components/prism-coffeescript.js");
-require("prismjs/components/prism-cpp.js");
-require("prismjs/components/prism-csharp.js");
-require("prismjs/components/prism-go.js");
-require("prismjs/components/prism-http.js");
-require("prismjs/components/prism-java.js");
-require("prismjs/components/prism-lua.js");
-require("prismjs/components/prism-markdown.js");
-require("prismjs/components/prism-markup-templating.js"); // dep of php
-require("prismjs/components/prism-markup.js"); // xml
-require("prismjs/components/prism-objectivec.js");
-require("prismjs/components/prism-perl.js");
-require("prismjs/components/prism-php.js");
-require("prismjs/components/prism-python.js");
-require("prismjs/components/prism-ruby.js");
-require("prismjs/components/prism-scala.js");
-require("prismjs/components/prism-sql.js");
-require("prismjs/components/prism-swift.js");
-require("prismjs/components/prism-graphql.js");
-require("prismjs/plugins/treeview/prism-treeview.js");
-const DEFAULT_LANG = 'clike';
-const NEW_LINE_EXP = /\n(?!$)/g;
-Prism.languages.insertBefore('javascript', 'string', {
-    'property string': {
-        pattern: /([{,]\s*)"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
-        lookbehind: true,
-    },
-}, undefined);
-Prism.languages.insertBefore('javascript', 'punctuation', {
-    property: {
-        pattern: /([{,]\s*)[a-z]\w*(?=\s*:)/i,
-        lookbehind: true,
-    },
-}, undefined);
-Prism.languages.markdoc = Object.assign(Object.assign({}, Prism.languages.markdown), { tag: {
-        pattern: /{%(.|\n)*?%}/i,
-        inside: {
-            keyword: {
-                pattern: /^({%\s*\/?)(\w*|-)*\b/i,
-                lookbehind: true,
-            },
-            id: /#(\w|-)*\b/,
-            string: /".*?"/,
-            equals: /=/,
-            number: /\b\d+\b/i,
-            variable: {
-                pattern: /\$[\w.]+/i,
-                inside: {
-                    punctuation: /\./i,
-                },
-            },
-            function: /\b\w+(?=\()/,
-            punctuation: /({%|\/?%})/i,
-            boolean: /false|true/,
-        },
-    }, variable: {
-        pattern: /\$\w+/i,
-    }, function: {
-        pattern: /\b\w+(?=\()/i,
-    } });
-/**
- * map language names to Prism.js names
- */
-function mapLang(lang) {
-    return ({
-        json: 'js',
-        'c++': 'cpp',
-        'c#': 'csharp',
-        'c#+newtonsoft': 'csharp',
-        'java8+apache': 'java',
-        'objective-c': 'objectivec',
-        shell: 'bash',
-        viml: 'vim',
-        curl: 'bash',
-        'node.js': 'js',
-    }[lang] || DEFAULT_LANG);
-}
-/**
- * Highlight source code string using Prism.js
- * @param source source code to highlight
- * @param lang highlight language
- * @return highlighted source code as **html string**
- */
-function highlight(source, lang = DEFAULT_LANG) {
-    lang = lang.toLowerCase();
-    const grammar = Prism.languages[lang] || Prism.languages[mapLang(lang)];
-    return Prism.highlight(source.toString(), grammar, lang);
-}
-function addLineNumbers(highlightedCode, start = 1) {
-    const codeLines = highlightedCode.split(NEW_LINE_EXP);
-    return codeLines
-        .map((line, i) => {
-        return `<span class="code-line" data-line-number=${start + i}>${line}</span>`;
-    })
-        .join('\n');
-}
-//# sourceMappingURL=highlight.js.map

package/src/core/utils/highlight.ts

@@ -1,125 +0,0 @@
-import * as Prism from 'prismjs';
-import 'prismjs/components/prism-bash.js';
-import 'prismjs/components/prism-c.js';
-import 'prismjs/components/prism-clike.js';
-import 'prismjs/components/prism-coffeescript.js';
-import 'prismjs/components/prism-cpp.js';
-import 'prismjs/components/prism-csharp.js';
-import 'prismjs/components/prism-go.js';
-import 'prismjs/components/prism-http.js';
-import 'prismjs/components/prism-java.js';
-import 'prismjs/components/prism-lua.js';
-import 'prismjs/components/prism-markdown.js';
-import 'prismjs/components/prism-markup-templating.js'; // dep of php
-import 'prismjs/components/prism-markup.js'; // xml
-import 'prismjs/components/prism-objectivec.js';
-import 'prismjs/components/prism-perl.js';
-import 'prismjs/components/prism-php.js';
-import 'prismjs/components/prism-python.js';
-import 'prismjs/components/prism-ruby.js';
-import 'prismjs/components/prism-scala.js';
-import 'prismjs/components/prism-sql.js';
-import 'prismjs/components/prism-swift.js';
-import 'prismjs/components/prism-graphql.js';
-import 'prismjs/plugins/treeview/prism-treeview.js';
-
-const DEFAULT_LANG = 'clike';
-const NEW_LINE_EXP = /\n(?!$)/g;
-
-Prism.languages.insertBefore(
-  'javascript',
-  'string',
-  {
-    'property string': {
-      pattern: /([{,]\s*)"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
-      lookbehind: true,
-    },
-  },
-  undefined,
-);
-
-Prism.languages.insertBefore(
-  'javascript',
-  'punctuation',
-  {
-    property: {
-      pattern: /([{,]\s*)[a-z]\w*(?=\s*:)/i,
-      lookbehind: true,
-    },
-  },
-  undefined,
-);
-
-Prism.languages.markdoc = {
-  ...Prism.languages.markdown,
-  tag: {
-    pattern: /{%(.|\n)*?%}/i,
-    inside: {
-      keyword: {
-        pattern: /^({%\s*\/?)(\w*|-)*\b/i,
-        lookbehind: true,
-      },
-      id: /#(\w|-)*\b/,
-      string: /".*?"/,
-      equals: /=/,
-      number: /\b\d+\b/i,
-      variable: {
-        pattern: /\$[\w.]+/i,
-        inside: {
-          punctuation: /\./i,
-        },
-      },
-      function: /\b\w+(?=\()/,
-      punctuation: /({%|\/?%})/i,
-      boolean: /false|true/,
-    },
-  },
-  variable: {
-    pattern: /\$\w+/i,
-  },
-  function: {
-    pattern: /\b\w+(?=\()/i,
-  },
-};
-
-/**
- * map language names to Prism.js names
- */
-export function mapLang(lang: string): string {
-  return (
-    {
-      json: 'js',
-      'c++': 'cpp',
-      'c#': 'csharp',
-      'c#+newtonsoft': 'csharp',
-      'java8+apache': 'java',
-      'objective-c': 'objectivec',
-      shell: 'bash',
-      viml: 'vim',
-      curl: 'bash',
-      'node.js': 'js',
-    }[lang] || DEFAULT_LANG
-  );
-}
-
-/**
- * Highlight source code string using Prism.js
- * @param source source code to highlight
- * @param lang highlight language
- * @return highlighted source code as **html string**
- */
-export function highlight(source: string | number | boolean, lang: string = DEFAULT_LANG): string {
-  lang = lang.toLowerCase();
-  const grammar = Prism.languages[lang] || Prism.languages[mapLang(lang)];
-  return Prism.highlight(source.toString(), grammar, lang);
-}
-
-export function addLineNumbers(highlightedCode: string, start = 1): string {
-  const codeLines = highlightedCode.split(NEW_LINE_EXP);
-
-  return codeLines
-    .map((line, i) => {
-      return `<span class="code-line" data-line-number=${start + i}>${line}</span>`;
-    })
-    .join('\n');
-}