TSUCKY BLOG Written by ツッキー(Tsucky)

【Manablog Copy】ソースコードをカッコよく表示する方法【無料ツールで高速化】

Manablog Copy

Manablog Copyを使うブロガー「ソースコードをそのまま表示したいなぁ。」

このような悩みに答えます。

ブログ記事内で、ソースコードを表示する場合は、ソースコードを変換する必要があります。

具体的には、ソースコードをそのまま表示したい場合、HTMLのタグ内で使われている文字(<、>、&、“ 等)を[ &lt; ][ &gt; ][ &amp; ][ &quot; ]といった文字実体参照記号へ変換します。

  • [ < ]→[ &lt; ]
  • [ > ]→[ &gt; ]
  • [ & ]→[ &amp; ]
  • [ " ]→ [ &quot; ]

ただ上記の変換は手動でやろうとすると、正直すごく大変です。

そこで、この記事では”無料変換ツール”を使い、高速で記事内にソースコードを表示する方法を伝えたいと思います。

それではよろしくお願いします。

この記事を読んでわかること

  • ソースコードをそのまま記事で表示する方法

スポンサーリンク

記事内でソースコードをそのまま表示する方法

Manablog Copyを使っているブロガーの人が、記事内でそのままソースコードを表示するには、次の流れで作業をします。

  • ①ソースコードをコピー
  • ②無料変換ツール内にペースト
  • ③変換後のソースコードを記事内にコピペ
  • ④AddQuicktagで「Programming」タグをつける。

1分もあればいけるので、忘れないうちにやっておきましょう。

今回は以下の「参考記事」のボックスを出すソースコードを紹介します。(今は僕のプロフィールページに飛ぶようにリンクを貼っています。)

参考記事ツッキーのプロフィール

ソースコードは以下

<p style="margin-bottom: 10px;"><span style="font-size: 14px;color: #fff;margin-right: 10px;background-color: #00CC00;border-radius: 2px;padding: 8px 8px 7px;">参考記事</span><a href="記事のリンク" rel="noopener" target="_blank">記事名</a></p>

これを無料ツールの以下の箇所にペースト→変換をクリックします。
»無料ツール「HTMLタグ文字実体参照(文字参照)変換ツール」はこちらより

ソースコードを貼り付け

そうすると、変換後のソースコードが出力されます。

変換後のソースコード
&lt;p style=&quot;margin-bottom: 10px;&quot;&gt;&lt;span style=&quot;font-size: 14px;color: #fff;margin-right: 10px;background-color: #00CC00;border-radius: 2px;padding: 8px 8px 7px;&quot;&gt;参考記事&lt;/span&gt;&lt;a href=&quot;記事のリンク&quot; rel=&quot;noopener&quot; target=&quot;_blank&quot;&gt;記事名&lt;/a&gt;&lt;/p&gt;

あとは、このソースコードを記事にコピペすればオッケーです。

Manablog Copyの場合、AddQuicktagというプラグインを使っていれば、ソースコードをカッコよく表示する「Programming」タグがあり、使用すると以下のようになります。

<p style="margin-bottom: 10px;"><span style="font-size: 14px;color: #fff;margin-right: 10px;background-color: #00CC00;border-radius: 2px;padding: 8px 8px 7px;">参考記事</span><a href="記事のリンク" rel="noopener" target="_blank">記事名</a></p>

これでソースコードをそのまま表示させることができますし、面倒な変換作業からも解放されます。

ということで今回の内容は以上です。

今回の記事がManablog Copyを使う仲間の参考になれば嬉しいです。

※まだManablog Copyを使っていない人は以下の記事を参考にどうぞ。

コメント、質問がある場合はツイッターでメッセージを頂くか、問い合わせからコメントを頂ければ、返信させていただきます。よろしくお願いします。

期間限定①Amazonのコンテンツギフトで文章力レベルアップ【音声は神】

人気記事①資産を爆増させる米国株投資ブログ【始め方・稼ぎ方まで徹底解説】