WordPressに貼り付けたコードが等幅フォントで表示されないのでcssを適用して修正する。highlight.js

2018-09-27
css3wordpress
    

目次

概要

WordPressのコードハイライトにhighlight.jsを利用してますが、 なぜかフォントが等幅で表示されなかったので、カスタマイズ機能からcssを適用した話。

highlight.jsに関しては利用しているテーマ:cocoonの機能のものを利用。

https://wp-cocoon.com/

追加したcss

以下のようなcssを適用しています。 line-heightはこだわりがあったので、1.5としています。

ここで" .entry-content "はハイライトエリアに適用するclassとしています。

.entry-content pre {	
    font: normal 10pt Consolas, Monaco, monospace;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 10pt;
    /* line-height: normal; */
    font-family: Consolas, Monaco, monospace;
    line-height: 1.5;
}

ビフォー

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

アフター

うまく適用出ているのがわかるかと思います。

余談ですが、highlight.jsのテーマはmonokaiを利用しています。

    

関連記事

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

WordPressを静的サイトに変換するプラグインの紹介。WP2Static
静的化の目的 WP2Static StaticPress Simply Static 3つを比較して WordPressを静的化するプラグインとして、simply staticやStaticPress、WP2Static…

WordPressをAmazon S3 + CloudFront構成で月額200円で運用
システム全体の この構成のメリット・デメリット AWSの構成 静的ページを作成するWordPressプラグイン WP2Static WP Offload Media Lite WordPress on Docker環境 まとめ AmazonS…

WordPress + WP2Static で静的サイトを生成する
クイックスタート 保存対象URLの補完 WP2StaticはWordPress から静的サイトを生成するプラグインです。 これまで同じく静的サイトを生成する「StaticPress」や「Simply Static…

AWS EC2 + Bitnami で始める WordPress
Bitnami WordPressを使うメリット 個人的に感じた3つのメリット Amimoto AMI と比較して Bitnami AMIについて Bitnami WordPressの構成と設定 サーバの構成 各種設定 MySQL WordPress Apache…

Ubuntu18.04にApache MariaDB PHP7.2 をセットアップ
環境情報 モジュール類の更新 Apacheのインストール PHP7.2のインストール インストール 動作確認 MariaDBのセットアップ MariaDBのインストール データベースと作業用ユーザの作成 参考 AWS の EC2 の Ubuntu18.0…

技術ブログが月間1万PVに達しました
現時点でのブログのステータス 書いた記事 ブログ開始からのアクセス数推移 注目を集めた記事 アドセンス まとめ 技術ブログを書き始めて1年半が経過しましたが、やっと1万PVに達することができました。 この達成までに書いた記事数は15…

github-markdown-cssを無理やりWordPressにねじ込んだ話
github-markdown-cssについて やったこと github-markdown-cssのCDNをheadタグに埋め込む bodyタグのclassに追加する 細かい調整。一部CSSの削除 ビフォーアフター ビフォー アフター 関連 github…

mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介
mavonEditor セットアップ カスタマイズ デモ コード APIの紹介 プロパティ ツールバー イベントメソッド おまけ : mavonEditorのサイズの固定 mavonEditor https://github.com/hinesboy…

最新の投稿

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

AWS Amplify で コンテナベースのデプロイを行い REST API を構築
検証した環境 やってみる 初期準備 パイプラインを確認 終了処理 参考 AWS Amplify で コンテナベースのデプロイを行い REST API を構築した際のメモです。 検証した環境 amplify 5.1.…

Pythonでソケット通信を実装しメッセージの送受信を行う
ソース server.py client.py 動かしてみる 参考 Pythonでソケット通信を実現する方法です。 ソース server.py サーバ側のソースです。 client.py…

next_permutationをJSで実装する
ソース 使い方 参考 C++で提供されている順列を生成する next_permutation のJS実装です。 ソース 順列が存在する場合はtrueを返し、そうでなければfalse…

応用情報技術者試験の合格体験記
受験時のステータス 受験結果 対策 スケジュール 午前問題 午後問題 参考書等 令和…

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

CentOS8 に Python + OpenCV をインストール
インストール テスト CentOS8 で標準で提供されているパッケージで Python + OpenCV 環境を構築する方法です。 検証した環境は CentOS8.3 (Docker) です。 インストール まず opencv…

[Perl] CentOS8 に plenv をインストール
インストール Step1 事前準備 Step2 PATHを通す (README通りにインストール) Step2 PATHを通す ($HOME以外にplenvをインストール) Step3 Perlインストール Step4 cpanmインストール CentOS…

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

CentOS6(Docker)でyum update できなくなった
エラー内容 対応 CentOS6.10 で yum update しようとしたところエラーが出てアップデートできなかったので対応した時の記録 エラー内容 以下のようなエラーが出ました。 対応 を以下のように変更したところ解決しました。

Tags

Dates

s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV
© 2021   404 motivation not found