コードブロックの見た目を変更しました。
10月28日追記
Gatsbyブログについて、初noteを書きました。
【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順
こんにちは、筋肉めがねです。
幾つかのブログを見ているとコードブロックが綺麗なブログが多いんですよね。この違いは何なのか、という事で、Prismjsを使用してコードブロックの見た目を綺麗にしました。
以下、目次です。
gatsby-remark-prismjsのインストール
今回使用しているテンプレートである”gatsby-v2-starter-lumen”には、もともとgatsby-remark-prismjsは入っているようですが、練習を兼ねて、terminalからインストールします。
公式ページにある通り進めていきます。
公式ページのgatsby-remark-prismjsのインストール方法
npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjsgatsby-config.jsファイルを以下の通りに変更しました。
{
resolve: 'gatsby-remark-prismjs',
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: false,
noInlineHighlight: false,
languageExtensions: [
{
language: "superscript",
extend: "javascript",
definition: {
superscript_types: /(SuperType)/,
},
insertBefore: {
function: {
superscript_keywords: /(superif|superelse)/,
},
},
},
],
prompt: {
user: "root",
host: "localhost",
global: false,
}
},
},
...この時点で、設定はすでにオーケーなんでしょうけども、少しだけフォントの大きさを修正したかったので、_highlight.scssで以下を追記しました。
pre[class*="language-"] {
...
font-size: 0.9rem;
...
}コードブロックにタイトルをつける
つづいて、コードブロックにタイトルをつけます。
公式ページにある通り進めていきます。
公式ページのgatsby-remark-code-titlesのインストール方法
npm install gatsby-remark-code-titles --save-devそして、gatsby-config.jsファイル内で、先ほど導入したgatsby-remark-prismjsプラグインの前に挿入します。
`gatsby-remark-code-titles`,
{
resolve: 'gatsby-remark-prismjs',
options: {最後にgatsby-code-titleクラスに対してスタイルを編集します。
&__body {
...
& .gatsby-code-title {
transform: translateY(-12px);
color: #3090C7;
display: inline-block;
background-color: #E5E4E2;
padding: 1px 8px;
word-break: break-all;
box-sizing: inherit;
font-size: .8em;
font-weight: 500;
max-width: $layout-post-single-width;
margin-left: 15px;
margin-right: 15px;
margin-bottom: -20px;
display: block;
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
}
...
...
@include breakpoint-sm {
.post-single {
&__footer {
margin-left: auto;
margin-right: auto;
}
&__body {
...
& .gatsby-code-title {
max-width: $layout-post-single-width;
display: block;
margin-bottom: -20px;
display: block;
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
font-size: .8em;
box-sizing: inherit;
line-height: 20px;
margin-left: auto;
margin-right: auto;
padding: 1px 0px;
}
}
}
}上のscssの記述の中で、重複している部分や無駄な部分がありましたら、遠慮なく教えていただけますとすんごい助かります。
それでは、本日は以上です。