Fine-tune prism syntax highlighting and change <pre> and <kbd> font

Author: jason-roundtree

web/components/DescriptiveItem.js

@@ -1,33 +1,28 @@
 import React from 'react'
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import styled from 'styled-components'
-import duotoneLight from 'prism-react-renderer/themes/duotoneLight'
+import duotoneLight from 'prism-react-renderer/themes/oceanicNext'
 
-// TODO: fix text overflow
 const Pre = styled.pre`
-    font-family: 'Courier Prime', monospace;
+    font-family: 'Inconsolata', monospace;
     font-size: .9em;
     overflow: auto;
     text-align: left;
-    /* margin: 1em 0; */
-    padding: 0.5em;
+    padding: 0.5em 0.5em 0.5em 0;
     & .token-line {
         line-height: 1.4em;
         height: 1.3em;
     }
 `
 const LineNo = styled.span`
     display: inline-block;
-    padding-right: 1em;
+    text-align: right;
+    width: 1.5em;
+    margin: 0 1em 0 0;
     user-select: none;
     opacity: 0.5;
+    color: rgb(144, 210, 245);
 `
-// const Line = styled.div`
-//     display: table-row;
-// `
-// const LineContent = styled.span`
-//     display: table-cell;
-// `
 
 export default function DescriptiveItem({ section }) {
     console.log('DescriptiveItem props: ', section)

web/src/styles/global.css

@@ -4,7 +4,7 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;500;600&display=swap');
 
-@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500&display=swap');
 
 * {
     padding: 0;
@@ -211,7 +211,7 @@ tr th:first-child, tr td:first-child {
 }
 
 kbd {
-    font-family: 'Courier Prime', monospace;
+    font-family: 'Inconsolata', monospace;
     background-color: rgb(34, 34, 34);
     color: white;
     padding: 5px;
@@ -220,10 +220,6 @@ kbd {
     font-size: .9em;
 }
 
-/* pre {
-    font-family: 'Courier Prime', monospace;
-} */
-
 footer {
     height: 100px;
     margin: 40px 0 0;