Adds Prims line numbering

robdy · Feb 4, 2022 · f455fa0 · f455fa0
1 parent 9450e66
commit f455fa0
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 19 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -71,7 +71,7 @@ module.exports = {
               aliases: {},
               // If you wish to only show line numbers on certain code blocks,
               // leave false and use the {numberLines: true} syntax below
-              showLineNumbers: false,
+              showLineNumbers: true,
               noInlineHighlight: false,
               // Customize the prompt used in shell output
               // Values below are default

diff --git a/src/components/CodeBlock.js b/src/components/CodeBlock.js
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -7,7 +7,6 @@ import { withPrefix } from 'gatsby'
 import { MDXProvider } from '@mdx-js/react'
 import { NoteBlock, WarningBlock, TipBlock } from './Block'
 import { LinkToAnywhere } from './LinkToAnywhere'
-import { CodeBlock } from './CodeBlock'
 
 const TemplateWrapper = ({ children }) => {
   const { title, description, siteUrl } = useSiteMetadata()
@@ -150,7 +149,6 @@ const TemplateWrapper = ({ children }) => {
           Warning: WarningBlock,
           Tip: TipBlock,
           a: LinkToAnywhere,
-					pre: CodeBlock,
         }}
       >
         {children}

diff --git a/src/components/layout.css b/src/components/layout.css
@@ -671,9 +671,11 @@ pre[class*='language-'].line-numbers > code {
 /*#endregion Prism */
 
 /*#region PrismJS customization */
-code[class*='language-'] {
+
+/* To be used for mobile (wrapped) view only */
+/* code[class*='language-'] {
   white-space: pre-wrap;
-}
+} */
 
 code[class*='language-'],
 pre[class*='language-'] {
@@ -682,21 +684,28 @@ pre[class*='language-'] {
   tab-size: 2;
 }
 
+/* Code block shading and radius (not apply to inline code) */
 pre {
   box-shadow: 2px 4px 25px rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
 }
 
-.gatsby-highlight pre[class*='language-'].line-numbers {
-  padding-left: 3.3em;
-}
-
 /* Fix long param/cmdlets names overflowing */
 code[class*='language-'],
 pre[class*='language-'] {
   word-break: break-word;
 }
 
+/* To align with pre element padding */
+.line-numbers .line-numbers-rows {
+  top: 1em;
+}
+
+/* Overrides width:auto for span elements */
+.line-numbers .line-numbers-rows {
+  width: 3em !important;
+}
+
 /*#endregion PrismJS customization */
 
 /*#region Comments */