カテゴリー
WordPress

WordPress 5.0 で Gutenberg ブロックエディターが使用できなかった設定を修正しました

修正方法

  1. ユーザー > あなたのプロフィール
  2. 個人設定 > ビジュアルエディター の、 [ビジュアルリッチエディターを使用しない] のチェックを外す。
  3. [プロフィールを更新]
カテゴリー
コンピューター

【Visual Studio Code】Markdown PDF の表示を CSS で変更する方法

はじめに

Markdown PDF のプレビュー表示を変更する方法をノートいたします。

まとめ

  • VS Code の Markdown PDF の設定で PDF の CSS を指定すれば良い。
  • 出力した PDF が変化するのであって、VS Code 上のプレビューの表示は変化しない点に注意。
  • 左が PDF スタイル変更前、右が変更後の比較画像をページトップに掲載。
カテゴリー
WordPress

【WordPress】Jetpack Markdown と SyntaxHighlighter Evolved を使う設定

Jetpack Markdown と SyntaxHighlighter Evolved を使うように変更いたしました!

そのときのポイントや、変更した設定などの項目をノートしておきます♪

ポイント

  • マークダウン記法は、テキストエディタでのみ使用可能。 ビジュアルエディタでは使用できない。
  • テキストエディタからビジュアルエディタへ切り替えるとコードのインデント空白が削除されてしまう。 これに対応するにはビジュアルエディタを使わないようにするしか無い。
  • Jetpack プラグインの Markdown で書いたコードは、SyntaxHighlighter Evolved プラグインを通してシンタックスハイライト表示できる。
  • SyntaxHighlighter Evolved プラグインは、ショートコードだけでなく、<pre> タグにも対応している。
  • マークアップリファレンス↓
    Markdown quick reference — Support — WordPress.com
  • Jetpack のマークアップに対応したプログラミング言語↓
    Posting Source Code — Support — WordPress.com

変更点・設定内容など

新しく導入や変更した設定したこと

  • Jetpack プラグインの Markdown をオンにした。
  • SyntaxHighlighter Evolved プラグインをインストールした。
  • WordPress の、ユーザー > あなたのプロフィール、ビジュアルリッチエディターを使用しないにチェックを打ち、ビジュアルエディタの機能自体をオフにした。

SyntaxHighlighter Evolved をインストールしますと、プラグイン一覧画面で次のようにありましたの。

TIP: Don’t use the Visual editor if you don’t want your code mangled. TinyMCE will “clean up” your HTML.

ポイントにも書きましたけれども、ビジュアルエディタに切り替えますと TinyMCE の働きによってコードが編集されてしまいます。ですのでビジュアルエディタを停止いたしました。

SyntaxHighlighter Evolved プラグイン設定

  • テーマ: Eclipse
  • すべてのブラシを読み込む: チェックを打った。ショートコードではなく、<pre> タグを直接使用するため
    他の設定