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を利用しています。

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

関連記事

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…

最新の投稿

[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 しようとしたところエラーが出てアップデートできなかったので対応した時の記録 エラー内容 以下のようなエラーが出ました。 対応 を以下のように変更したところ解決しました。

PostfixでメールリレーしてMailHogで受信する開発用Dockerコンテナの構築
環境 Dockerイメージ作成 コンテナの起動 telnetで送信テスト phpで送信テスト Postfixのリレーを介して送信されたメールをMailHog(開発用SMTPサーバ)でキャッチするDocker開発環境を構築した際のメモです。 環境 Docker…

GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする
手順 GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする方法についてのメモです。 手順 まず、gitlab.comにて適当なリポジトリを…

Python poetryでパッケージ開発 PyPIで公開 Pytestでテスト CIをGitHub Actionsで回す
Poetry でパッケージ開発 pytest でユニットテストを実施しカバレッジを算出する パッケージをビルドし PyPI で公開する 検証環境にデプロイする 本番環境にデプロイする GitHub Actions で CI を回す codecovの設定 GitHub…

Perlでconstant(定数)をhashのキーに使う
ハマった事象 解決方法 1 括弧をつける 2 & をつける 参考にしたサイト Perlでconstant(定数)をhash…

php-fpmのステータスページを表示 Apache & htaccess
試した環境 php-fpm の pm.status_path について php-fpmのconfの設定 .htaccess の設定 アクセスしてみる 参考にしたサイト Apache環境で php-fpm のステータスページを htaccess…

Tags

Dates

© 2021   404 motivation not found