ID非公開

2020/10/14 21:08

44回答

HTMLでプログラミングのコードを出力する方法について質問です。

画像

ビジネス書 | 経済、景気29閲覧xmlns="http://www.w3.org/2000/svg">250

ベストアンサー

0

ID非公開

2020/10/21 12:02

その他の回答(3件)

1

質問者さまが勘違いをされているようなので、フォローします。 shimix さまの回答は正しいと思います。 HTML において、< > を表示するためには &lt; &gt; をソースコードに記載する必要があります。 まずは、そこをご理解いただきたいという、shimix さまのご意見は理解された方が良いと思います。 さらに、Nozomi さまのご回答は、マークダウン記法について書いていますが、これは直ちに HTML ソースコードとして記載したところで、Qiita と同様の見た目になるということではありません。 マークダウン記法をHTMLとして生成するソフトを利用することで、Qiitaに近しい見た目にすることが可能です。 https://pandoc.org/installing.html 勉強のために、マークダウン記法で記述したのち、上記ソフトでHTMLに変換してみれば、Qiitaのような表記をどのようにしてHTMLとして表現できるのかがわかるかと思います。 質問者さまの質問に愚直に回答するならば 適切なCSSやJSを記述する が正解です。 ただし、Qiitaのような見た目にするためには、膨大なCSSを組まなければなりません。 質問が「HTMLでどのように入力すればよいのか」なので、直接的な回答になっていませんが、サードパーティCSS、JSを利用してもよいならば、以下のようなものを利用して、HTML内にマークダウンを記載のが最も近道です。 https://github.com/markedjs/marked おそらく、Qiitaと同じことをするならば、これがセオリーかと思います。

1人がナイス!しています

0

これはマークダウンと呼ばれる記法で書かれています。ページのソースコードを見てみると、 ```python:良い例\n\u0026amp;gt;\u0026amp;gt;\u0026amp;gt; a, b = 2, \u0026amp;#39;my-string\u0026amp;#39;\n\u0026amp;gt;\u0026amp;gt;\u0026amp;gt; a\n2\n\u0026amp;gt;\u0026amp;gt;\u0026amp;gt; b\n\u0026amp;#39;my-string\u0026amp;#39;\n``` となっている部分がありますが、このようにバッククォート3つ ``` で囲い言語名を指定すると、自動的にシンタックスハイライトされたコードブロックとして表示されます。 GItHubやQiitaなどのサイトはマークダウン記法をサポートしていますが、一般のHTMLでは当然使えません。ですので、コードを <pre> タグ内に書いて、それをハイライトする方が良いかと思います。そのためのライブラリ highlight.js などがあります。 https://qiita.com/tadnakam/items/99088d78512a20e75ff3 ここで紹介されているように、css を選んで色を変えられます。

2

こんな感じですかね・・・ &gt;&gt;&gt; a, b = 2, &#039;my-string&#039;<br> &gt;&gt;&gt; a<br> 2<br> &gt;&gt;&gt; b<br> &#039;my-string&#039;

2人がナイス!しています

ID非公開

質問者

2020/10/14 21:25

すみません、私の質問と全く関係のない回答に見えるのですが、投稿先を間違っておられるのではありませんか?