@redocly/theme 0.45.2-rc.0 → 0.45.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.45.2-rc.0",
+  "version": "0.45.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -27,6 +27,7 @@
   "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",
@@ -43,6 +44,7 @@
     "@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 { addLineNumbers } from '@redocly/theme/core/utils';
-import { useModalScrollLock, useReportDialog, useThemeHooks } from '@redocly/theme/core/hooks';
+import { highlight, addLineNumbers } from '@redocly/theme/core/utils';
+import { useModalScrollLock, useReportDialog } 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,16 +68,8 @@ export function CodeBlock({
   const [sourceCode, setSourceCode] = useState<string>(
     (source || externalSource?.sample?.get?.(externalSource)) ?? '',
   );
-  const { useCodeHighlight } = useThemeHooks();
-  const { highlight } = useCodeHighlight() || {};
 
-  const highlightedCode = highlightedHtml
-    ? withLineNumbers
-      ? addLineNumbers(highlightedHtml, startLineNumber)
-      : highlightedHtml
-    : children
-      ? null
-      : highlight?.(sourceCode, lang, { withLineNumbers, startLineNumber });
+  const highlightedCode = highlightedHtml || (children ? null : highlight(sourceCode, lang));
 
   // 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
@@ -110,11 +102,13 @@ export function CodeBlock({
         />
         <CodeBlockContainer
           ref={codeBlockRef}
-          withLineNumbers={withLineNumbers}
+          className={withLineNumbers ? 'line-numbers' : ''}
           dangerouslySetInnerHTML={
             highlightedCode
               ? {
-                  __html: highlightedCode,
+                  __html: withLineNumbers
+                    ? addLineNumbers(highlightedCode, startLineNumber)
+                    : 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;
-  withLineNumbers?: boolean;
+  className?: string;
   dangerouslySetInnerHTML?: {
     __html: string;
   };
@@ -117,244 +117,30 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
     cursor: help;
   }
 
-  .line-number {
-    display: inline-block;
-    min-width: 2.5em;
-    padding-right: 0.8em;
-    text-align: right;
-    pointer-events: none;
-    user-select: none;
+  .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;
+    }
   }
 
   .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`
-      .line-number:not(.highlighted),
-      .line-number:not(.highlighted) > span,
-      .line-number:not(.highlighted) > span > span {
+      .code-line:not(.highlighted),
+      .code-line:not(.highlighted) > span,
+      .code-line:not(.highlighted) > span > span {
         color: grey;
       }
     `}

package/src/components/CodeBlock/variables.ts

@@ -1,30 +1,6 @@
 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,d09GRgABAAAAAAgYAAsAAAAAEGAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPwAAAFY1UkH9Y21hcAAAAYQAAAB/AAACCtvO7yxnbHlmAAACBAAAA+MAAAlACm1VqmhlYWQAAAXoAAAAKgAAADZfxj5jaGhlYQAABhQAAAAYAAAAJAFbAMFobXR4AAAGLAAAAA4AAAA0CGQAAGxvY2EAAAY8AAAAHAAAABwM9A9CbWF4cAAABlgAAAAfAAAAIAEgAHZuYW1lAAAGeAAAATcAAAJSfUrk+HBvc3QAAAewAAAAZgAAAIka0DSfeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGRYyjiBgZWBgaGQoRZISkLpUAYOBj0GBiYGVmYGrCAgzTWFweEV4ysehs1ArgDDFgZGIA3CDAB2tQjAAHic7ZHLEcMwCESfLCz/VEoKSEE5parURxMOC4c0Ec283WGFdABgBXrwCAzam4bOK9KWeefM3Hhmjyn3ed+hTRq1pS7Ra/HjYGPniHcXMy4G/zNTP7/KW5HTXArkvdBW3ArN19dCG/NRIN8K5HuB/CiQn4U26VeBfBbML9NEH78AeJyVVc1u20YQ3pn905JcSgr/YsuSDTEg3cR1bFEkYyS1HQcQ2jQF2hot6vYSoECKnnPLA/SWUy9NTr31Bfp+6azsNI0SGiolzu7ODnfn+2Z2lnHG3rxhr9nfLGKbLGesncAYYnUHpsVnMG/uwyzNdFIVd6HI6twp8+R3LpT4TSglLoTHwwJgG2/dFvKrl9yI507/p5CCq4LTxB/PlPjkFaMHnWB/0S9je7RTPS+utnGtom1T2q5pk/e3H0M1S18rsXAL7wgpxQuhAmteGGvNjmcfGXuwnFNOPCXxeOGmnjrBLWNyBeNtVq2Hs03yus1aPS3mzSyNVSfu588iW1Q93x/4fjcHn+5EkS2tMxr4xIRa8ese+4L9uKZnxEqs8+ldyN9atU02a5t5uQ8hZGms1QTKpaKYqnipiNNOAIeIADC0JNEOYY+jtSgFoOchiAjRGFACpUTRje8bwIYWGCDEgENY8MEu9bnCYCdAxftoNg0KiSpUtPaHcanYwzXRu6T4r40b5npal3V7UHWCPJW9niyl1vIHgoujEXZjudBkeWkOeMQBRmbEPhKzij1i52t6/TadL+3q7H0U1eq4E8cG4gIIwQLx8VX7ToPXgPrehVc5QXHR7gMSmwjKfaYAP4KvZV+yn9bE18y2IY37LvtyrSg3i7ZK++B603ndlg/gBJpZRsfpBI6hyiaQ6FjlnThz8lAC3LgBIMnXDOAXxBQ4SIgiEhx2AcGCAwAhwjXRpCQms42bwAUt75BvAwgONzdgOfWEwzk4Ylzj4mz+5YEzzXzWX9aNlk7ot65y5QnBHsNlm6zDTu7sspRqG4V+fgJ1lVBZ07Nm7s5nemo3Lf3PO7iwtnroQ5/YDGwPRUip6fV6L+27p+wCHwSvPs85UnHqId8NAn5IBsKdv95KrL9m31Gsf2a/rluDslk1y1J9GE+LUmmVT/OyOHaFKGnapt2H5XeJTmKd6qYNoVVZOy+pWzr7rMip3ndG/4mQSoUcMbAqG/YNIAdXhkAqTVruXhocSKN0iS4Rwj7vSS4fcF/La07BfeQSuRAcFeW+9igjwPhhYPpGCBCBHhxiKMyFMFT7ziRH7RtfIWdiha+TdW+Rqs7bLHdN2ZJIKl0um0x3op9saYr0REeRdj09pl43pMzz4tjztrY8L4o8bzT+oLY27PR/eFtXs/YY5vtwB5Iqad14eYN0ujveMaGWqkdU3TKbQSC5Uvxaf4fA7SAQ3r2tEfIhd4duld91bwMisjqBw22orthNcroXl7KqO1329HBgAexgoCfGAwiDPoBnriki3lmNojrzvD0tjo6E3vPYP6E2BMIAeJxjYGRgYADiY8t3FsTz23xl4GbYzIAB/v9nWM6wBcjgYGAC8QH+QQhZAAB4nGNgZGBg2MzAACeXMzAyoAJeADPyAh14nGNgAILNpGEA0fgIZQAAAAAAAAA2AHIAvgE+AZgCCAKMAv4DlgPsBEYEoHicY2BkYGDgZchi4GQAASYg5gJCBob/YD4DABTSAZcAeJx9kU1uwjAQhV/4qwpqhdSqi67cTTeVEmBXDgBbhBD7AHYISuLUMSD2PUdP0HNwjp6i676k3qQS9Ujjb968mYUNoI8zPJTHw02Vy9PAFatfbpLuHbfIT47b6MF33KH+6riLF0wc93CHN27wWtdUHvHuuIFbfDhuUv903CKfHbfxgC/HHerfjrtYen3HPTx7ambiIl0YKQ+xPM5ltE9CU9NqxVKaItaZGPqDmj6VmTShlRuxOoniEI2sVUIZnYqJzqxMEi1yo3dybf2ttfk4CJTT/bVOMYNBjAIpFiTJOLCWOGLOHGGPBCE7l32XO0tmw04MjQwCQ7774B//lDmrZkJY3hvOrHBiLuiJMKJqoVgrejQ3CP5Yubt0JwxNJa96Oypr6j621VSOMQKG+uP36eKmHylcb0MAeJxtwdEOgjAMBdBeWEFR/Mdl7bTJtMsygc/nwVfPoYF+QP+tGDAigDFhxgVXLLjhjhUPCtmKTtmLaGN7x6dy/Io5bybqoevRQ3LRObb0sk3HKpn1SFqW6ru26vbpYfcmRCccJhqsAAA=') format('woff');
-  }
-  
   /**
     * @tokens Code base styles
     */
@@ -112,11 +88,5 @@ 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/components/Filter/FilterContent.tsx

@@ -8,6 +8,7 @@ import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { Filter } from '@redocly/theme/components/Filter/Filter';
+import { isFromToSelectedOptions } from '@redocly/theme/core/utils';
 
 export type FilterContentProps = {
   setFilterTerm: (value: string) => void;
@@ -29,7 +30,11 @@ export function FilterContent({
     if (filterTerm) return true;
     if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
       return filter.selectedOptions.size;
-    } else if (filter.selectedOptions.from && filter.selectedOptions.to) {
+    } else if (
+      isFromToSelectedOptions(filter.selectedOptions) &&
+      filter.selectedOptions.from &&
+      filter.selectedOptions.to
+    ) {
       return true;
     }
   });

package/src/components/Footer/FooterColumn.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import type { ResolvedNavItem } from '@redocly/config';
 
 import { FooterItem } from '@redocly/theme/components/Footer/FooterItem';
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, isNavLinkItem } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
 
@@ -24,7 +24,7 @@ export function FooterColumn({ column, className }: FooterColumnProps): JSX.Elem
   return (
     <FooterColumnWrapper data-component-name="Footer/FooterColumn" className={className}>
       <FooterColumnTitle>
-        {column.link ? (
+        {isNavLinkItem(column) ? (
           <Link to={column.link} external={column.external} target={column.target}>
             {label}
           </Link>

package/src/components/Markdown/variables.ts

@@ -5,7 +5,7 @@ export const markdown = css`
   * @tokens Markdown Content
   */
 
-  --md-content-max-width: 910px;
+  --md-content-max-width: 688px;
   --md-content-padding: 25px 0px 25px 0px; // @presenter Spacing
   --md-content-font-size: var(--font-size-base); // @presenter FontSize
   --md-content-font-family: var(--font-family-base); // @presenter FontFamily

package/src/components/Search/SearchFilterField.tsx

@@ -5,7 +5,7 @@ import type { SearchFacet, SearchFilterItem } from '@redocly/theme/core/types';
 
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ResetIcon } from '@redocly/theme/icons/ResetIcon/ResetIcon';
-import { useThemeHooks } from '@redocly/theme/core';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { SearchFilterFieldSelect } from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldSelect';
 import { SearchFilterFieldTags } from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldTags';
 

package/src/components/UserMenu/LogoutMenuItem.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LogoutIcon } from '@redocly/theme/icons/LogoutIcon/LogoutIcon';
-
-import { DropdownMenuItem } from '../Dropdown/DropdownMenuItem';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 
 export type LogoutMenuItemProps = {
   iconOnly?: boolean;

package/src/components/UserMenu/UserMenu.tsx

@@ -12,7 +12,7 @@ import { UserAvatar } from '@redocly/theme/components/UserMenu/UserAvatar';
 import { UserInfoMenuItem } from '@redocly/theme/components/UserMenu/UserInfoMenuItem';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { LogoutMenuItem } from '@redocly/theme/components/UserMenu/LogoutMenuItem';
-import { breakpoints } from '@redocly/theme/core';
+import { breakpoints } from '@redocly/theme/core/utils';
 
 export type UserMenuProps = {
   className?: string;

package/src/core/types/hooks.ts

@@ -109,13 +109,6 @@ 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/highlight.ts

@@ -0,0 +1,125 @@
+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');
+}

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/add-line-numbers';
+export * from '@redocly/theme/core/utils/highlight';
 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/src/core/utils/type-guards.ts

@@ -1,3 +1,5 @@
+import { ResolvedNavItem, ResolvedNavLinkItem } from '@redocly/config';
+
 export function isUndefined<T>(value: T | undefined): value is undefined {
   return value === undefined;
 }
@@ -17,3 +19,13 @@ export function isNotNull<T>(value: T): value is NonNullable<T> {
 export const isObject = (item: unknown): item is object => {
   return isNotNull(item) && typeof item === 'object';
 };
+
+export const isNavLinkItem = (item: ResolvedNavItem): item is ResolvedNavLinkItem => {
+  return item.link !== undefined;
+};
+
+export const isFromToSelectedOptions = (
+  options: unknown,
+): options is { from: string; to: string } => {
+  return isObject(options) && 'from' in options && 'to' in options;
+};

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

@@ -1,6 +0,0 @@
-/**
- * @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

@@ -1,19 +0,0 @@
-"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/src/core/utils/add-line-numbers.ts

@@ -1,17 +0,0 @@
-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');
-}