styles

content/articles/2021-01-23_управление-контентом-для-сайта-gatsbyjs-с-помощью-netlifycms.md

@@ -88,9 +88,9 @@ git clone https://github.com/gatsbyjs/gatsby-starter-hello-world .
 * **build** - сборка приложения
 * **develop** - запуск сервера для разработки
 * **format** - форматирование всех файлов через prettier
-* **start** - запускает `npm run develop`
+* **start** - запускает **npm run develop**
 * **serve** - запуск скомпилированного сайта
-* **clean** - очищает папку `.cache`
+* **clean** - очищает папку **.cache**
 
 Более подробно о gatsby cli можно узнать [здесь](https://www.gatsbyjs.com/docs/reference/gatsby-cli/).
 
@@ -600,7 +600,7 @@ SEO.propTypes = {
 
 Далее осталось вставить этот компонент на все страницы вот таким образом:
 
-```js
+```jsx
 // ./src/pages/index.jsx
 
 import React from 'react';

gatsby-node.esm.js

@@ -53,13 +53,13 @@ exports.createPages = async ({ actions, graphql }) => {
       },
     })
 
-    createPage({
+    // createPage({
-      path: `amp/article/${node.frontmatter.slug}/`,
+    //   path: `amp/article/${node.frontmatter.slug}/`,
-      component: articleTemplateAMP,
+    //   component: articleTemplateAMP,
-      context: {
+    //   context: {
-        slug: node.frontmatter.slug,
+    //     slug: node.frontmatter.slug,
-      },
+    //   },
-    })
+    // })
   })
 
   snippets.forEach(({ node }) => {

src/styles/global.scss

@@ -207,6 +207,44 @@ article .gt-container {
     color: $white-clr;
   }
 
+  .gatsby-highlight pre[class*="language-scss"] {
+    & code {
+      & span.token.property {
+        color: #dea53d;
+      }
+    }
+  }
+
+  .gatsby-highlight pre[class*="language-ts"] {
+    & code {
+      & span.token.class-name {
+        color: #f08787;
+      }
+      & span.token.constant {
+        color: #9a6c07;
+      }
+    }
+  }
+
+  .gatsby-highlight pre[class*="language-js"] {
+    & code {
+      & span.token.class-name {
+        color: #f08787;
+      }
+      & span.token.constant {
+        color: #9a6c07;
+      }
+    }
+  }
+
+  .gatsby-highlight pre[class*="language-jsx"] {
+    & code {
+      & span.token.class-name {
+        color: #f08787;
+      }
+    }
+  }
+
   .gatsby-highlight pre[class*="language-js"]:before {
     content: "js";
     background: rgb(247, 223, 30);
@@ -336,6 +374,23 @@ article .gt-container {
     & p img {
       border: 1px solid #505050;
     }
+
+    .gatsby-highlight pre[class*="language-ts"] {
+      & code {
+        & span.token.constant {
+          color: #f8c555;
+        }
+      }
+    }
+  
+    .gatsby-highlight pre[class*="language-js"] {
+      & code {
+        & span.token.constant {
+          color: #f8c555;
+        }
+      }
+    }
+
     .gatsby-highlight pre[class*="language-"] {
       background: #282c34;
       & code {