ブログにHTMLソースを書くと自動で変換されちゃう問題を解決した。

ども、Shinです。

プログラミングでブログにHTMLファイルを貼り付けることがあるんですけど、テキストモードでHTMLコードを貼り付けると勝手にフォームが表示される問題に悩まされてました。

フォームのHTMLをブログに載っけたらこんな感じで、勝手に変換されるからソースコードの載せれないという。

ですが、解決。その流れを備忘録で残します。

そもそもコードをブログに載っける方法

こんな感じで↓

def landingfunc(request):
return render(request, 'landing.html', {})

シンタックスハイライトでいい感じにブログに載っけるにはプラグインを使います。

Highlighting Code Block」というプラグインをインストール

プラグインで新規プラグインから「Highlighting Code Block」と検索してください。

それをインストールすれば簡単に使えるようになります。

載せるコードの言語に合わせて選択して利用しましょう。

プラグイン使ってもうまくいかない

ですが、HTMLファイルに限ってはHTMLが勝手に変換されてうまくいきませんでした。

 

この黒い枠を出した状態でコピペしてもうまくいきません。

HTMLファイルが自動で変換されるのを防ぐ方法

まず、コードからブログに貼り付けます↓

{% load static %}
<!DOCTYPEhtml>
<htmllang=“ja”>
<head>
<metacharset=“UTF-8”>
<metahttp-equiv=“X-UA-Compatible”content=“IE=edge”>
<metaname=“viewport”content=“width=device-width, initial-scale=1.0”>
<linkhref=“{% static ‘style.css’ %}”rel=“stylesheet”>
<title>Document</title>
</head>
<bodyclass=“text-center”>
<mainclass=“form-signin”>
{{error}}
<formmethod=“POST”>{% csrf_token %}
<h1class=“h3 mb-3 fw-normal”>ログインする</h1>
<labelfor=“inputEmail”class=“visually-hidden”>ユーザー名</label>
<input
type=“text”
id=“inputEmail”
class=“form-control”
placeholder=“ユーザー名”
name=‘username’
required
autofocus
/>
<labelfor=“inputPassword”class=“visually-hidden”>パスワード</label>
<input
type=“password”
id=“inputPassword”
class=“form-control”
placeholder=“パスワード”
name=‘password’
required
/>
<buttonclass=“w-100 btn btn-lg btn-primary mb-3”type=“submit”>
ログイン
</button>
<ahref=“{% url ‘signup’ %}”>初めてご利用の方はこちらでサインイン</a>
</form>
</main>
</body>
</html>
この状態でドラッグ&ドロップで選択。
この状態で「HTML」を選択します。
そしたらシンタックスハイライトできました。
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'style.css' %}" rel="stylesheet">
<title>Document</title>
</head>


<body class="text-center">
<main class="form-signin">
{{error}}
<form method="POST">{% csrf_token %}
<h1 class="h3 mb-3 fw-normal">ログインする</h1>
<label for="inputEmail" class="visually-hidden">ユーザー名</label>
<input
type="text"
id="inputEmail"
class="form-control"
placeholder="ユーザー名"
name='username'
required
autofocus
/>
<label for="inputPassword" class="visually-hidden">パスワード</label>
<input
type="password"
id="inputPassword"
class="form-control"
placeholder="パスワード"
name='password'
required
/>
<button class="w-100 btn btn-lg btn-primary mb-3" type="submit">
ログイン
</button>
<a href="{% url 'signup' %}">初めてご利用の方はこちらでサインイン</a>
</form>
</main>
</body>
</html>

これでHTMLソースもブログに載っけれますね。

HTMLコード以外はテキストモードで直接コピペしたらいけます。インデントは手動でやるしかないかもしれません。

※追記です。インデントできない問題はVScodeからコードをそのままコピーして貼り付ければインデントされました。手動でやる必要はありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です