コードブロックに対する強調表示構文の追加

注意:この投稿はDED . toの構文強調表示を使用します.アクションでPrismjsを参照するには、元の投稿を参照してくださいmy blog
Visual StudioのコードまたはSubLastのようなIDEを使用してコードを記述しました.たぶんあなたは私のようなコードブロックを使用してブログを構築した.どうすればよいのでしょうか

    .unstyled-code-block {
        display: block;
        position: absolute;
        color: none;
    }

です.

    .styled-code-block {
        display: block;
        position: absolute;
        color: inherit;
    }

構文強調表示は何ですか？

構文の強調表示は、さまざまな色やフォントの用語の種類に応じてテキストを表示する機能です.構文強調表示の意図は、読者のための視覚的な区別を作成することです.Visual Studioのコード、Vim、およびSublimeのようなテキストエディタはすべてこの機能を利用します.コードはこれらの区別を解釈するほうがずっと簡単です.

プリムジャ

PrismJS JavaScriptで構築された軽量構文ライターです.PrismJsはどんなウェブサイトでも含むことができます、しかし、このチュートリアルのために、私はそれをGatsbyでインストールしています.
以下にそのライブラリの使い方についてのリンクを示します.PrismJS Docs - Basic Usage

GatsbyJSによるインストール

前提条件-ギャツビー(または反応する)の初心者知識
ステップ1 -ギャツビープロジェクトを作成する
このチュートリアルでは、簡単にカスタマイズ可能なギャツビースターターを使用します.gatsby-starter-blog . このスターターは、最適化されたイメージとMarkdownポストで、フル機能のブログの支持を含みます.新しいフォルダを作成し、端末を開き、以下のコマンドを実行してインストールします.gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blogこれは、名前' Gatsbyスターターブログ'で新しいギャツビーのサイトを作成し、我々はギタブからこのスターターのソースコードを含めるように追加している
新しいプロジェクトの構造は次のようになります.

我々のサイトのものとともにnode_modules , package.json , 設定ファイルも参照してください.

content/ 我々のイメージ資産とMarkdownブログ柱を持ちます

src/ 我々のウェブサイトの構成要素(layout . js、biove . js、seo . js)、ページ(index . js、404 . js)、テンプレート(blog . post . js、私たちの単一のPOSTテンプレートファイル)、およびCSSファイル(normalize . css、style . css)を含みます

static/ ビルド時に生成される静的ファイルを含む

ステップ2 -必要なプラグインをインストールする
新しいギャツビーサイトがターミナルを開くことによって動作し、プロジェクトのフォルダに移動して実行されるようにします.npm start . これは、localhostで見ることができるあなたのギャツビーサイトを構築します:8000
次に、3つの重要なパッケージがプロジェクトにインストールされていることを確認する必要があります.スターターgatsby-starter-blog これらのパッケージが既に含まれていますが、別のスターターやブログを使っている場合は、ターミナルを開き、プロジェクトのルートフォルダに移動して実行します.npm install gatsby-transformer-remark gatsby-remark-prismjs prismjsgatsby-transformer-remark - 使用しているMarkdownファイルをパースしますRemark
gatsby-remark-prismjs - Markdownファイル内のコードブロックに対する構文強調表示をPrismJSを使用して追加する
prismjs - PrimsJS、私たちのシンタックスハイライト
ステップ3 -コンフィグファイルにプラグインを追加する
次に、gatsby設定で新しいプラグインを参照していることを確認する必要があります.開くgatsby-config.js を追加します.

    // In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
          options: {
            // Class prefix for <pre> tags containing syntax highlighting;
            // defaults to 'language-' (e.g. <pre class="language-js">).
            // If your site loads Prism into the browser at runtime,
            // (e.g. for use with libraries like react-live),
            // you may use this to prevent Prism from re-processing syntax.
            // This is an uncommon use-case though;
            // If you're unsure, it's best to use the default value.
            classPrefix: "language-",
            // This is used to allow setting a language for inline code
            // (i.e. single backticks) by creating a separator.
            // This separator is a string and will do no white-space
            // stripping.
            // A suggested value for English speakers is the non-ascii
            // character '›'.
            inlineCodeMarker: null,
            // This lets you set up language aliases. For example,
            // setting this to '{ sh: "bash" }' will let you use
            // the language "sh" which will highlight using the
            // bash highlighter.
            aliases: {},
            // This toggles the display of line numbers globally alongside the code.
            // To use it, add the following line in gatsby-browser.js
            // right after importing the prism color scheme:
            // require("prismjs/plugins/line-numbers/prism-line-numbers.css")
            // Defaults to false.
            // If you wish to only show line numbers on certain code blocks,
            // leave false and use the {numberLines: true} syntax below
            showLineNumbers: false,
            // If setting this to true, the parser won't handle and highlight inline
            // code used in markdown i.e. single backtick code like `this`.
            noInlineHighlight: false,
            // This adds a new language definition to Prism or extend an already
            // existing language definition. More details on this option can be
            // found under the header "Add new language definition or extend an
            // existing language" below.
            languageExtensions: [
              {
                language: "superscript",
                extend: "javascript",
                definition: {
                  superscript_types: /(SuperType)/,
                },
                insertBefore: {
                  function: {
                    superscript_keywords: /(superif|superelse)/,
                  },
                },
              },
            ],
            // Customize the prompt used in shell output
            // Values below are default
            prompt: {
              user: "root",
              host: "localhost",
              global: false,
            },
            // By default the HTML entities <>&'" are escaped.
            // Add additional HTML escapes by providing a mapping
            // of HTML entities and their escape value IE: { '}': '&#123;' }
            escapeEntities: {},
          },
        },
      ],
    },
  },
]

ステップ4 - CSSテーマを含める
Prismjsから選択する8つのテーマを提供したり、独自のCSSを使用して作成することができます.プリズムの『明日の夜』テーマを使っています.PrismJSホームページには、別のテーマオプションが表示されます.https://prismjs.com/ )
テーマを使用するにはgatsby-browser.js ファイル

    // gatsby-browser.js
    require("prismjs/themes/prism-tomorrow.css")

我々のテーマのファイルを含むことgatsby-browser.js このCSSを既存のスタイルシートと一緒に使用できます.
これが私のブログのCSSファイルのこのセクションのピークです.

/* My initial styles with custom scrollbar 
code blocks without language specification will
use this instead of PrismJS 
*/
code {
  background-color: #4f4543;
  color: #f8f5f2;
  padding: 8px;
  border-radius: 3px;
  word-wrap: break-word; 
  letter-spacing: 1.15px;
  font-size: 14px;
} 

pre code{
  display: block;
  padding: 1rem;
  margin: 1.5rem auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  line-height: 1.5;
  max-width: 70vw;
  min-width: 300px;
} 

pre code::-webkit-scrollbar {
  height: 1.25em;
} 

pre code::-webkit-scrollbar-track {
border-radius: 1.5px;
background-color: #8f2d56;
box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

pre code::-webkit-scrollbar-thumb {
height: 48px;
border-radius: 10px;
background-color: #FFB847;
box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

/* PrismJS Theme styles */
 pre[class*="language-"] {
   overflow: auto;
 }

 code[class*="language-"],
 pre[class*="language-"] {
   color: #ccc;
   background: #453d3b;
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
   line-height: 1.5;

   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;

   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;

 }

 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
   background: #453d3b;
 }

 /* Inline code */
 :not(pre) > code[class*="language-"] {
   padding: .1em; 
   border-radius: .3em;
   white-space: normal;
 }


 .token.comment,
 .token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
   color: #999;
 }

 .token.punctuation {
   color: #ccc;
 }

 .token.tag,
 .token.attr-name,
 .token.namespace,
 .token.deleted {
   color: #e2777a;
 }

 .token.function-name {
   color: #6196cc;
 }

 .token.boolean,
 .token.number,
 .token.function {
   color: #f08d49;
 }

 .token.property,
 .token.class-name,
 .token.constant,
 .token.symbol {
   color: #f8c555;
 }

 .token.selector,
 .token.important,
 .token.atrule,
 .token.keyword,
 .token.builtin {
   color: #cc99cd;
 }

 .token.string,
 .token.char,
 .token.attr-value,
 .token.regex,
 .token.variable {
   color: #7ec699;
 }

 .token.operator,
 .token.entity,
 .token.url {
   color: #67cdcc;
 }

 .token.important,
 .token.bold {
   font-weight: bold;
 }
 .token.italic {
   font-style: italic;
 }

 .token.entity {
   cursor: help;
 }

 .token.inserted {
   color: green;
 }

/* Additional styling from Gatsby -

 * Remove the default PrismJS theme background-color, border-radius, margin, padding and overflow.
 * 1. Make the element just wide enough to fit its content.
 * 2. Always fill the visible space in .gatsby-highlight.
 * 3. Adjust the position of the line numbers
 */
 .gatsby-highlight pre[class*="language-"] {
  background-color: transparent;
  margin: 0;
  padding: 0;
  overflow: initial;
  float: left; /* 1 */
  min-width: 100%; /* 2 */
}

用途

私たちは、私たちのポストの1つでコード・ブロックを書くまで、どんな構文も強調しているのを見ません.既存のMarkdownポストのいずれかに移動します.blog/ フォルダ内content ) そして、いくつかのコードブロックを書きます.
以下に、Markdownでの書き込みに関する参考文献を示します.Markdown Cheatsheet
つのbackticksは、Markdownのマルチライン・コード・ブロックを示すのに用いられます.PrismJSを使用するには、以下のようにしてINTERNAL backticksで選択したコード言語を含める必要があります.

最後の考察

PrismJsは私の既存のギャツビーブログと統合するのが簡単でした、そして、私は同様に他のプロジェクトでそれを使う予定です.行の強調表示、行番号付け、シェルプロンプトを追加したり、コードの違いや線の隠蔽を示すなどの追加のオプションがあります.Prismjsを使用できる方法については、Gatsbyの豊富なドキュメントを参照してください.gatsby-remark-prismjs
私も、あなたのブラウザーであなたのブログをテストする前に、あなたのブログをテストすることを勧めます.あなたがPrismjsスタイルに変更を加える予定であるが、アクセシビリティガイドラインを満たすことを望むならば、これは特に役に立ちます.WebAIM Contrast Checker
リソース

Wiki - Syntax Highlighting

PrismJS Documentation

GatsbyJS - gatsby-remark-prismjs

gatsby-starter-blog