Tex, python, illusrator, VPSの学生ノート

latotex-blog

Adobe

Adobe Portfolioにソースコードのコードハイライトを使用する方法

投稿日:2021年9月6日 更新日:







金銭的関係で、ブログをAdobe Portfolioに移行しようと思っているのですが、
ソースコードのハイライトする方法が見つからなかったので、ここに残しておきます。

スポンサーリンク

Adobe Portfolioの埋め込み表示

Adobe Portfolioにおいて特定の範囲において背景色を設定することができません。
文字の色変更はできますが、いちいちコードハイライトを手動で行うのは気が遠くなります。
そこで、Adobe Portfolioの埋め込み表示を使って、コードハイライトができるようにします。
埋め込み表示に使えるタグはiframeのみです。

Javascript、html、cssの場合

codepanでソースコードを書き、それをiframeで埋め込み表示できるようにします。

見え方は以下の通りです。
見栄えは問題ないです。編集でもサイズ調整がしやすいメリットがあります。

それ以外の場合

Google Documentを使って、ソースコードハイライトができるようにします。アドオン(Code Blocks)が必要になります。
Adobe Portfolio側で埋め込み表示をする方法は以下のサイトを参照してください。

例えば、Code BlocksでソースコードハイライトしたGoogle Documentを作り、Adobe Portfolioのiframeタグに以下のように記述すると埋め込み表示ができます。


src="https://docs.google.com/document/d/e/2PACX-1vQ3gK9MSzo3TNe82e0MO_rF1AQIT43iYRGfnkf03rPY3OCOvWbtvYAQv2aS4UXasUxgzdY9N8fx7DaB/pub" height="1900" style="width: 1200% !important;" frameborder="0"

見え方は以下の通りです。
見栄えはあまり良くないですが、ハイライトできるプログラミング言語の種類が多いのはありがたいです。ちなみにGithubのGitを使うという方法もありますが、iframe表示をしてもAdobe Portfolioではエラーがでて埋め込み表示できませんでした。

画像で紹介したソースコード

いずれも過去の記事で紹介しています。画像はスマホ版でみた場合のみを載せています。

geopandasインストールでGDAL_DRIVER_PATHなどのエラーが出る原因
https://latotex.net/python/geopandas_error-username-space/

【cssのみ】左右で異なる色のストライプ柄の背景色をつくる!
https://latotex.net/css/vertical-stripes-with-different-colors-on-each-side/


-Adobe
-, , ,

Copyright© latotex-blog , 2021 All Rights Reserved Powered by STINGER.