表示確認用の記事←↓↑→…‥～

記事タイトルは h3 要素

←↓↑→…‥～

普通の文章の段落、そのいち。普通の文章の段落、そのいち。普通の文章の段落、そのいち。普通の文章の段落、そのいち。普通の文章の段落、そのいち。普通の文章の段落、そのいち。普通の文章の段落、そのいち。

普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。 普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。普通の文章の段落、そのに。

1. 番号付きリスト、そのいち
2. 番号付きリスト、そのに 番号付きリスト、そのに
3. 番号付きリスト、そのさん

普通の文章の段落。

• 番号無しリスト、そのいち
• 番号無しリスト、そのに 番号無しリスト、そのに
• 番号無しリスト、そのさん

普通の文章の段落。

引用した文章の段落そのいち。引用した文章の段落そのいち。引用した文章の段落そのいち。引用した文章の段落そのいち。引用した文章の段落そのいち。引用した文章の段落そのいち。引用した文章の段落そのいち。
引用した文章の段落そのに。引用した文章の段落そのに。引用した文章の段落そのに。引用した文章の段落そのに。 引用した文章の段落そのに。引用した文章の段落そのに。引用した文章の段落そのに。引用した文章の段落そのに。

u-ch https://u.hoso.net/
www.hoso.net https://www.hoso.net/

pre － － >8 ここから >8 － －

#!/usr/bin/perl
# -*- mode: perl; coding: utf-8-unix; -*-
use utf8;
use strict;
use warnings;

do {
   print "Hello, world.\n";
   print "こんにちは、世界。\n";
}
#--------1---------2---------3---------4---------5---------6---------7---------

pre

#--------1---------2---------3---------4---------5---------6---------7---------

#--------1---------2---------3---------4---------5---------6---------7---------8---------9---------0

pre － － 8< ここまで 8< － －

普通の文章の段落。
イメージ

そらいろのたね

えいちよん

えいちよん

えいちご

えいちご

SyntaxHighlighter 用のテーマ変更

以下をテーマの body 要素の最後に追加。

<!--
SyntaxHighlighter (begin)
-->
<!-- Include required JS files -->
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>
<!--
    At least one brush, here we choose JS. You need to include a brush for every
    language you want to highlight
-->
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPerl.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js'/>
<!--
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAppleScript.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAS3.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushColdFusion.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDelphi.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushErlang.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushGroovy.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJavaFX.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSass.min.js'/>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushScala.min.js'/>
-->
<!-- Include *at least* the core style and default theme -->
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css'/>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css'/>
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>
<!--
SyntaxHighlighter (end)
-->

blockquote の CSS

以下をテーマのカスタム CSS に追加。

/*
 * CSSで作る！魅力的な引用デザインのサンプル30（blockquote） https://saruwakakun.com/html-css/reference/blockquote
 */
.entry-content blockquote {
    position: relative;
    padding: 10px 15px 10px 60px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

.entry-content blockquote:before {
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 0;
    vertical-align: middle;
    content: "\201C";
    font-family: sans-serif;
    color: #9dd4ff;
    font-size: 90px;
    line-height: 1;
}

.entry-content blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

.entry-content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
/*
 *
 */