Notmyidea Vine

Underline, Emphasis and Highlighter Effects

2026-06-18T23:34:00+00:00

The theme provides custom u-line and hl CSS classes for underline emphasis and highlighter effects.

This is plain text, this is underline emphasis. This is blue underline, this is violet underline.

<span class="u-line">underline emphasis</span>
<span class="u-line u-line-blue">blue underline</span>
<span class="u-line u-line-violet">violet underline</span>

This is yellow highlight, this is green highlight, this is pink highlight.

<span class="hl hl-yellow">yellow highlight</span>
<span class="hl hl-green">green highlight</span>
<span class="hl hl-pink">pink highlight</span>
<span class="hl hl-blue">blue highlight</span>
<span class="hl hl-lavender">lavender highlight</span>
<span class="hl hl-peach">peach highlight</span>
<span class="hl hl-mint">mint highlight</span>
<span class="hl hl-coral">coral highlight</span>
<span class="hl hl-lemon">lemon highlight</span>

This is marker-style highlight, green marker.

<span class="hl hl-marker hl-yellow">Marker Yellow</span>
<span class="hl hl-marker hl-green">Marker Green</span>
<span class="hl hl-marker hl-pink">Marker Pink</span>
<span class="hl hl-marker hl-lavender">Marker Lavender</span>

Soulignement, emphase et surlignage

2026-06-18T23:34:00+00:00

Le thème propose des classes CSS u-line et hl pour le soulignement et le surlignage.

Texte normal, emphase soulignée. Voici un soulignement bleu, voici un soulignement violet.

<span class="u-line">emphase soulignée</span>
<span class="u-line u-line-blue">soulignement bleu</span>
<span class="u-line u-line-violet">soulignement violet</span>

Voici un surlignage jaune, voici un surlignage vert, voici un surlignage rose.

<span class="hl hl-yellow">jaune</span>
<span class="hl hl-green">vert</span>
<span class="hl hl-pink">rose</span>
<span class="hl hl-blue">bleu</span>
<span class="hl hl-lavender">lavande</span>

Voici un surlignage style marqueur, marqueur vert.

下線・強調・蛍光ペン効果

2026-06-18T23:34:00+00:00

このテーマは、下線による強調と蛍光ペン効果のためのカスタム CSS クラス u-line と hl を提供します。

これは通常のテキスト、これは下線による強調です。これは青い下線、これは紫の下線です。

<span class="u-line">underline emphasis</span>
<span class="u-line u-line-blue">blue underline</span>
<span class="u-line u-line-violet">violet underline</span>

これは黄色のハイライト、これは緑のハイライト、これはピンクのハイライトです。

<span class="hl hl-yellow">yellow highlight</span>
<span class="hl hl-green">green highlight</span>
<span class="hl hl-pink">pink highlight</span>
<span class="hl hl-blue">blue highlight</span>
<span class="hl hl-lavender">lavender highlight</span>
<span class="hl hl-peach">peach highlight</span>
<span class="hl hl-mint">mint highlight</span>
<span class="hl hl-coral">coral highlight</span>
<span class="hl hl-lemon">lemon highlight</span>

これはマーカー風のハイライト、緑のマーカーです。

<span class="hl hl-marker hl-yellow">Marker Yellow</span>
<span class="hl hl-marker hl-green">Marker Green</span>
<span class="hl hl-marker hl-pink">Marker Pink</span>
<span class="hl hl-marker hl-lavender">Marker Lavender</span>

밑줄, 강조 및 형광펜 효과

2026-06-18T23:34:00+00:00

이 테마는 밑줄 강조와 형광펜 효과를 위한 사용자 정의 CSS 클래스 u-line 과 hl 을 제공합니다.

이것은 일반 텍스트, 이것은 밑줄 강조입니다. 이것은 파란 밑줄, 이것은 보라 밑줄입니다.

<span class="u-line">underline emphasis</span>
<span class="u-line u-line-blue">blue underline</span>
<span class="u-line u-line-violet">violet underline</span>

이것은 노란 형광, 이것은 초록 형광, 이것은 분홍 형광입니다.

<span class="hl hl-yellow">yellow highlight</span>
<span class="hl hl-green">green highlight</span>
<span class="hl hl-pink">pink highlight</span>
<span class="hl hl-blue">blue highlight</span>
<span class="hl hl-lavender">lavender highlight</span>
<span class="hl hl-peach">peach highlight</span>
<span class="hl hl-mint">mint highlight</span>
<span class="hl hl-coral">coral highlight</span>
<span class="hl hl-lemon">lemon highlight</span>

이것은 마커 스타일 형광, 초록 마커입니다.

<span class="hl hl-marker hl-yellow">Marker Yellow</span>
<span class="hl hl-marker hl-green">Marker Green</span>
<span class="hl hl-marker hl-pink">Marker Pink</span>
<span class="hl hl-marker hl-lavender">Marker Lavender</span>

博客新增划线、重点及荧光笔效果支持

2026-06-18T23:34:00+00:00

这是普通文字，这是划线重点。这是蓝色划线重点，这是紫色划线重点。

<span class="u-line">这是划线重点</span>
<span class="u-line u-line-blue">蓝色划线重点</span>
<span class="u-line u-line-violet">紫色划线重点</span>

这是黄色高亮，这是绿色高亮，这是粉色高亮。

<span class="hl hl-yellow">黄色高亮</span>
<span class="hl hl-green">绿色高亮</span>
<span class="hl hl-pink">粉色高亮</span>
<span class="hl hl-blue">蓝色高亮</span>
<span class="hl hl-lavender">薰衣草高亮</span>
<span class="hl hl-peach">蜜桃高亮</span>
<span class="hl hl-mint">薄荷高亮</span>
<span class="hl hl-coral">珊瑚高亮</span>
<span class="hl hl-lemon">柠檬高亮</span>

这是记号笔风格高亮，绿色记号笔。

<span class="hl hl-marker hl-yellow">Marker Yellow</span>
<span class="hl hl-marker hl-green">Marker Green</span>
<span class="hl hl-marker hl-pink">Marker Pink</span>
<span class="hl hl-marker hl-lavender">Marker Lavender</span>

Image Layout Support

2026-06-18T19:30:00+00:00

This article demonstrates reusable image layout classes supported by the theme.

Side-by-side pair

View code

<div class="media-pair">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
</div>

Portrait row with fixed height

Use media-portrait-h-220 / 240 / 280 / 360 / 480 to constrain the display height. Images shrink proportionally — no cropping, no pagination.

View code

<div class="media-portrait-row media-portrait-h-240">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
</div>

Adaptive grid

View code

<div class="media-grid cols-3 masonry-js">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
  <img src="image-url" alt="img 03">
</div>

Single image with width control

Use media-w-100 / 95 / 90 … in 5% steps.

Image left, text right

Place a short caption, note, or steps alongside the image.

Works well for "one key image + one paragraph" layouts.

Image right, text left

Add reverse to flip the order. Collapses to single-column on mobile.

Carousel (with lightbox)

Gallery lightbox

Main image centred, thumbnail strip below. Click thumbnails or arrows to navigate; click the main image for fullscreen.

Mise en page des images

2026-06-18T19:30:00+00:00

Cet article présente les classes de mise en page d'images disponibles dans ce thème.

Deux images côte à côte

Rangée portrait avec hauteur fixe

Utilisez media-portrait-h-220 / 240 / 280 / 360 / 480 pour limiter la hauteur d'affichage. Les images se réduisent proportionnellement sans recadrage.

Grille adaptative

Image à gauche, texte à droite

Placez une courte légende ou des notes à côté de l'image.

Carrousel

画像レイアウトのサポート

2026-06-18T19:30:00+00:00

この記事では、テーマがサポートする再利用可能な画像レイアウトクラスを紹介します。

横並びのペア

コードを表示

<div class="media-pair">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
</div>

高さ固定の縦長画像の行

media-portrait-h-220 / 240 / 280 / 360 / 480 を使って表示の高さを揃えられます。画像は比率を保って縮小され、切り抜きやページ送りは発生しません。

コードを表示

<div class="media-portrait-row media-portrait-h-240">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
</div>

自動調整グリッド

コードを表示

<div class="media-grid cols-3 masonry-js">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
  <img src="image-url" alt="img 03">
</div>

幅を指定した単一画像

media-w-100 / 95 / 90 … を 5% 刻みで指定できます。

画像が左、テキストが右

画像の横に短いキャプションやメモ、手順を配置できます。

「重要な画像1枚 + 段落1つ」のレイアウトに適しています。

画像が右、テキストが左

reverse を追加すると順序が反転します。モバイルでは1カラムに折りたたまれます。

カルーセル（ライトボックス付き）

ギャラリーライトボックス

メイン画像を中央に配置し、その下にサムネイルの列を表示します。サムネイルや矢印をクリックして移動し、メイン画像をクリックすると全画面表示になります。

이미지 레이아웃 지원

2026-06-18T19:30:00+00:00

이 글에서는 테마가 지원하는 재사용 가능한 이미지 레이아웃 클래스를 소개합니다.

나란히 배치한 쌍

코드 보기

<div class="media-pair">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
</div>

높이를 고정한 세로 이미지 행

media-portrait-h-220 / 240 / 280 / 360 / 480 으로 표시 높이를 맞출 수 있습니다. 이미지는 비율을 유지하며 축소되어 잘림이나 페이지 넘김이 발생하지 않습니다.

코드 보기

<div class="media-portrait-row media-portrait-h-240">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
</div>

적응형 그리드

코드 보기

<div class="media-grid cols-3 masonry-js">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
  <img src="image-url" alt="img 03">
</div>

너비를 지정한 단일 이미지

media-w-100 / 95 / 90 … 를 5% 단위로 지정합니다.

이미지 왼쪽, 텍스트 오른쪽

이미지 옆에 짧은 캡션, 메모 또는 단계를 배치할 수 있습니다.

"핵심 이미지 1장 + 단락 1개" 레이아웃에 잘 어울립니다.

이미지 오른쪽, 텍스트 왼쪽

reverse 를 추가하면 순서가 뒤바뀝니다. 모바일에서는 단일 컬럼으로 접힙니다.

캐러셀 (라이트박스 포함)

갤러리 라이트박스

메인 이미지를 가운데에 배치하고 그 아래에 썸네일 줄을 표시합니다. 썸네일이나 화살표를 클릭해 이동하고, 메인 이미지를 클릭하면 전체 화면으로 표시됩니다.

博客新增图文布局和轮播图效果支持

2026-06-18T19:30:00+00:00

借助 AI Support，博客完善了图像显示，这篇 memo 用于记录可复用的图文布局。

并排 2 张图

查看代码

<div class="media-pair">
  <img src="图片链接" alt="图 01">
  <img src="图片链接" alt="图 02">
</div>

并排 2 张图（超过 2 张自动切换）

查看代码

<div class="media-pair">
  <img src="图片链接" alt="图 01">
  <img src="图片链接" alt="图 02">
  <img src="图片链接" alt="图 03">
  <img src="图片链接" alt="图 04">
</div>

左对齐竖图排列（可设置高度）

下面这个布局适合竖图左对齐排列展示，可以通过 media-portrait-h-220 / 240 / 280 / 360 / 480 这几个类限制显示高度，图片会在固定高度内按比例缩小完整显示，不会被截取，也不会启用左右翻页。

查看代码

<div class="media-portrait-row media-portrait-h-240">
  <img src="图片链接" alt="图 01">
  <img src="图片链接" alt="图 02">
</div>

自适应多图网格

查看代码

<div class="media-grid cols-3 masonry-js">
  <img src="图片链接" alt="图 01">
  <img src="图片链接" alt="图 02">
  <img src="图片链接" alt="图 03">
</div>

单图宽度控制

下面这个单图布局适合只有一张重点图的场景，可以通过 media-w-100 / 95 / 90 ... 这类类名控制宽度，按 5% 为步进自己调。

查看代码

<div class="media-single media-w-65">
  <img src="图片链接" alt="图片">
</div>

图左文右

这里是图文混排文案区域。你可以放一段简短说明、心得、步骤、引用等。

这种布局适合「一张重点图 + 一段解释」的场景，阅读节奏会更自然。

查看代码

<div class="media-split">
  <img src="图片链接" alt="图片">
  <div>
    <p>文案内容</p>
  </div>
</div>

图右文左

给容器增加 reverse 即可反转左右顺序，移动端会自动改为单列堆叠。

你后续只需要复制这一段结构，替换图片 URL 和文字内容就能复用。

查看代码

<div class="media-split reverse">
  <img src="图片链接" alt="图片">
  <div>
    <p>文案内容</p>
  </div>
</div>

图片轮播（含灯箱）

查看代码

<div class="media-carousel">
  <img src="图片链接" alt="图 01">
  <img src="图片链接" alt="图 02">
  <img src="图片链接" alt="图 03">
</div>

画廊灯箱（media-gallery）

主图大图居中展示，下方缩略图条显示所有图片并高亮当前项，点击 < > 或缩略图切换，点击主图进入全屏灯箱。

查看代码

<div class="media-gallery">
  <img src="图片链接" alt="图 01">
  <img src="图片链接" alt="图 02">
  <img src="图片链接" alt="图 03">
</div>

顺带，支持了代码折叠显示功能。

Markdown Typography Showcase

2026-06-18T12:00:00+00:00

This article demonstrates how the theme renders common Markdown typography elements.

Text Styles

Regular text, bold, italic, ~~strikethrough~~, inline code, and a hyperlink.

Combined styles: bold with ~~strikethrough~~, and italic with inline code.

Blockquotes

A quoted passage, such as a maxim, excerpt, or piece of highlighted text.

Multi-paragraph quotes are supported too.

This is the second paragraph in the same blockquote.

Lists

Unordered list:

Apple
Banana
Orange
Nested item A
Nested item B

Ordered list:

Step one: prepare
Step two: run
Step three: verify

Code Blocks

Inline code: use git status to inspect the working tree.

Fenced code block (Python):

def greet(name: str) -> str:
    return f"Hello, {name}!"

print(greet("world"))

Fenced code block (Shell):

# Install dependencies
pip install -r requirements.txt

# Start the development server
pelican content --autoreload --listen

Table

Feature	Support	Note
Bold	yes	`text`
Italic	yes	`text`
Strikethrough	yes	`~~text~~`
Code blocks	yes	Syntax highlighting
Tables	yes	GFM extension

Separator

A separator creates visual spacing between sections.

Image

Images also support click-to-zoom lightbox behavior.

Mise en page Markdown

2026-06-18T12:00:00+00:00

Cet article présente le rendu des éléments typographiques Markdown courants dans ce thème.

Styles de texte

Texte normal, gras, italique, ~~barré~~, code en ligne, lien hypertexte.

Combinaisons : gras avec ~~barré~~, italique avec code en ligne.

Citations

Une citation, qu'il s'agisse d'une maxime, d'un extrait ou d'un contenu à mettre en valeur.

Les citations multi-paragraphes sont aussi supportées.

Deuxième paragraphe dans le même bloc de citation.

Listes

Liste non ordonnée :

Pomme
Banane
Orange
Sous-élément A
Sous-élément B

Liste ordonnée :

Étape 1 : Préparer
Étape 2 : Exécuter
Étape 3 : Vérifier

Blocs de code

Code en ligne : utilisez git status pour vérifier l'état du dépôt.

Bloc de code avec coloration syntaxique (Python) :

def greet(name: str) -> str:
    return f"Hello, {name}!"

print(greet("world"))

Bloc de code (Shell) :

# Installer les dépendances
pip install -r requirements.txt

# Démarrer le serveur de développement
pelican content --autoreload --listen

Tableau

Fonctionnalité	Support	Remarque
Gras	✅	`texte`
Italique	✅	`texte`
Barré	✅	`~~texte~~`
Bloc de code	✅	Coloration Shiki
Tableau	✅	Extension GFM

Séparateur

Un séparateur crée un espacement visuel entre les sections.

Image

Les images supportent aussi le zoom au clic (effet lightbox).

Markdown タイポグラフィの紹介

2026-06-18T12:00:00+00:00

この記事では、テーマが一般的な Markdown のタイポグラフィ要素をどのように表示するかを紹介します。

テキストスタイル

通常のテキスト、太字、斜体、~~打ち消し線~~、インラインコード、そしてハイパーリンク。

組み合わせ: 太字と~~打ち消し線~~、そして 斜体とインラインコード。

引用

格言、抜粋、強調したい文章などの引用文。

複数段落の引用にも対応しています。

これは同じ引用ブロック内の2つ目の段落です。

コードブロック

インラインコード: 作業ツリーを確認するには git status を使います。

フェンスコードブロック（Python）:

def greet(name: str) -> str:
    return f"Hello, {name}!"

print(greet("world"))

フェンスコードブロック（Shell）:

# 依存関係をインストール
pip install -r requirements.txt

# 開発サーバーを起動
pelican content --autoreload --listen

テーブル

機能	対応	備考
太字	あり	`text`
斜体	あり	`text`
打ち消し線	あり	`~~text~~`
コードブロック	あり	シンタックスハイライト
テーブル	あり	GFM 拡張

区切り線

区切り線はセクション間に視覚的な余白を作ります。

画像

画像はクリックで拡大表示（ライトボックス）にも対応しています。

Markdown 타이포그래피 소개

2026-06-18T12:00:00+00:00

이 글에서는 테마가 일반적인 Markdown 타이포그래피 요소를 어떻게 렌더링하는지 보여줍니다.

텍스트 스타일

일반 텍스트, 굵게, 기울임, ~~취소선~~, 인라인 코드, 그리고 하이퍼링크.

조합 스타일: 굵게와 ~~취소선~~, 그리고 기울임과 인라인 코드.

인용문

격언, 발췌, 강조하고 싶은 문장 등의 인용문.

여러 단락으로 된 인용문도 지원합니다.

이것은 같은 인용 블록의 두 번째 단락입니다.

순서 없는 목록:

사과
바나나
오렌지
중첩 항목 A
중첩 항목 B

순서 있는 목록:

1단계: 준비
2단계: 실행
3단계: 검증

코드 블록

인라인 코드: 작업 트리를 확인하려면 git status 를 사용합니다.

코드 블록 (Python):

def greet(name: str) -> str:
    return f"Hello, {name}!"

print(greet("world"))

코드 블록 (Shell):

# 의존성 설치
pip install -r requirements.txt

# 개발 서버 시작
pelican content --autoreload --listen

표

기능	지원	비고
굵게	지원	`text`
기울임	지원	`text`
취소선	지원	`~~text~~`
코드 블록	지원	구문 강조
표	지원	GFM 확장

구분선

구분선은 섹션 사이에 시각적 여백을 만듭니다.

이미지

이미지는 클릭하여 확대하는 라이트박스 기능도 지원합니다.

Markdown 排版展示

2026-06-18T12:00:00+00:00

这篇文章展示主题对常见 Markdown 排版元素的渲染效果。

文字样式

普通文本、加粗、斜体、~~删除线~~、行内代码、超链接。

组合使用：加粗配 ~~删除线~~，斜体配 行内代码。

引用块

引用一段话，可以是名言、摘录，或者需要特别强调的内容。

多行引用也支持。

第二段在同一个引用块内。

列表

无序列表：

苹果
香蕉
橙子
嵌套项 A
嵌套项 B

有序列表：

第一步：准备
第二步：执行
第三步：验证

代码块

行内代码：用 git status 查看工作区状态。

围栏代码块（Python）：

def greet(name: str) -> str:
    return f"Hello, {name}!"

print(greet("world"))

围栏代码块（Shell）：

# 安装依赖
pip install -r requirements.txt

# 启动开发服务器
pelican content --autoreload --listen

表格

功能	支持	备注
加粗	✅	`text`
斜体	✅	`text`
删除线	✅	`~~text~~`
代码块	✅	支持语法高亮
表格	✅	GFM 扩展

分隔线

分隔线上方内容与下方内容之间会有视觉间隔。

图片

图片也支持点击放大（灯箱效果）。

Notmyidea Vine

Underline, Emphasis and Highlighter Effects

Soulignement, emphase et surlignage

下線・強調・蛍光ペン効果

밑줄, 강조 및 형광펜 효과

博客新增划线、重点及荧光笔效果支持

Image Layout Support

Side-by-side pair

Portrait row with fixed height

Adaptive grid

Single image with width control

Image left, text right

Image right, text left

Carousel (with lightbox)

Gallery lightbox

Mise en page des images

Deux images côte à côte

Rangée portrait avec hauteur fixe

Grille adaptative

Image à gauche, texte à droite

Carrousel

画像レイアウトのサポート

横並びのペア

高さ固定の縦長画像の行

自動調整グリッド

幅を指定した単一画像

画像が左、テキストが右

画像が右、テキストが左

カルーセル（ライトボックス付き）

ギャラリーライトボックス

이미지 레이아웃 지원

나란히 배치한 쌍

높이를 고정한 세로 이미지 행

적응형 그리드

너비를 지정한 단일 이미지

이미지 왼쪽, 텍스트 오른쪽

이미지 오른쪽, 텍스트 왼쪽

캐러셀 (라이트박스 포함)

갤러리 라이트박스

博客新增图文布局和轮播图效果支持

并排 2 张图

并排 2 张图（超过 2 张自动切换）

左对齐竖图排列（可设置高度）

自适应多图网格

单图宽度控制

图左文右

图右文左

图片轮播（含灯箱）

画廊灯箱（media-gallery）

Markdown Typography Showcase

Text Styles

Blockquotes

Lists

Code Blocks

Table

Separator

Image

Mise en page Markdown

Styles de texte

Citations

Listes

Blocs de code

Tableau

Séparateur

Image

Markdown タイポグラフィの紹介

テキストスタイル

引用

リスト

コードブロック

テーブル

区切り線

画像

Markdown 타이포그래피 소개

텍스트 스타일

인용문

목록

코드 블록

표

구분선