【はてな記法】よく使うソースコードのシンタックスハイライト：スーパーpre記法( >|| ～ ||< )

Syntax Highlighting of Source Code with Hatena Notation

スーパーpre記法

>|| ～～ ||<
整形したHTMLなどのソースをそのまま表示（pre）

'>|ここにコードの種類|
''''ここにコードを書く
'||<

シンタックスハイライトをはてな仕様で利用するには、ソースコードを一度はてな記法で書いてから、コピペしなければならない。
ので、ここにまとめてみた。

html

<header>
	<h1>Welcome to Our Website</h1>
	<nav>
		<ul>
			<li>
				<a href="#">Home</a>
			</li>
			<li>
				<a href="#">About Us</a>
			</li>
			<li>
				<a href="#">Services</a>
			</li>
			<li>
				<a href="#">Portfolio</a>
			</li>
			<li>
				<a href="#">Contact</a>
			</li>
		</ul>
	</nav>
	<section>
		<h2>About Us</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis justo id velit congue cursus. Nunc vestibulum, odio sit amet iaculis tempor, tellus nisi rhoncus ex, vitae cursus enim leo at felis. Duis nec dui vel lorem venenatis fringilla. Quisque vestibulum arcu nec est egestas, ut hendrerit nunc blandit. Ut sit amet bibendum libero.</p>
	</section>
	<section>
		<h2>Our Services</h2>
		<ul>
			<li>Web Design</li>
			<li>Graphic Design</li>
			<li>SEO Optimization</li>
			<li>Content Creation</li>
		</ul>
	</section>
	<section>
		<h2>Portfolio</h2>
		<div class="portfolio-item">
			<img src="image1.jpg" alt="Project 1">
			<h3>Project 1</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
		<div class="portfolio-item">
			<img src="image2.jpg" alt="Project 2">
			<h3>Project 2</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</section>
	<footer>
		<p>© 2023 Our Company. All rights reserved.</p>
	</footer>
</header>

css

.flowing-text {
    white-space: nowrap; /* テキストを折り返さないように設定 */
    overflow: hidden; /* 要素外にはみ出す部分を隠す */
    animation: flow 10s linear infinite; /* テキストが流れるアニメーションを適用 */
}
@keyframes flow {
    0% { transform: translateX(100%); /* 初期位置を要素の幅分右にずらす */
}
100% {
    transform: translateX(-100%); /* テキストが要素の幅を超えて左へ流れる */
}

javascript

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' async></script>  <script>

<script>

$(document).ready(function () {
  $("pre").before(
    '<div class="codeWrap"><a href="javascript:void(0)">［コードの折り返しを切り替える］</a></div>'
  );

  $("div.codeWrap").on("click", function () {
    var preElement = $(this).next("pre");
    var linkElement = $(this).children("a");

    if (preElement.css("white-space") === "pre") {
      preElement.css({
        "overflow-x": "visible",
        "white-space": "pre-wrap"
      });
      linkElement.text("［横スクロールバーを表示］");
    } else {
      preElement.css({
        "overflow-x": "auto",
        "white-space": "pre"
      });
      linkElement.text("［横スクロールバーを消す］");
    }

    return false;
  });
});

</script>
 

python

import requests
import yaml

Sub EraceSheet()
    payload = {'out': 'yaml'}
    r = requests.get('https://api.syosetu.com/novelapi/api/', params=payload).text

print(r)

sh

$ pip install requests requests_oauthlib
$ python ファイル名.py 

ruby

class Foo
  def bar'baz' # return baz
  end
end

hatena

>|hatena|ってどんなコードなんでしょう？

↓こういうやつのこと？
[:contents]
[f:id:posalympic2021:20220219224914p:plain]

おまけ

表組

りんご	赤	1
みかん	だいだい	2
ぶどう	紫	3

|りんご|赤|1|
|みかん|だいだい|2|
|ぶどう|紫|3|

項目名ありの表

名前	色	個数
りんご	赤	1
みかん	だいだい	2

|*名前|*色|*個数|
|りんご|赤|1|
|みかん|だいだい|2|

引用記法

hatebcustom

　←just kidding.

実際は、こう書いている。↷

[https://rubirubi.hateblo.jp/:title]
[f:id:fobitows:20230820121546p:image:w360]
[https://www.hatena.ne.jp/:bookmark]　←just kidding.

【色付きで分かりやすい！】ソースコードをハイライト表示させる方法 - after work lab

• [あとで読む]
• [design]
• [**css]
• [HTML]

参考になりました。

2023/08/23 07:46

はてなブログ Perfect GuideBook [改訂第2版]

---