Material 設定サンプル#
yaml ファイル#
site_name: おもむろにメモ書き
site_url: https://omomuroni.github.io/
repo_url: https://github.com/omomuroni/omomuroni.github.io
theme:
custom_dir: overrides
favicon: custom/icons/pencil.svg # ファビコン画像ファイルをファイルを直接指定すること
icon:
logo: material/bookshelf
repo: fontawesome/brands/git-alt
name: material
palette:
- media: "(prefers-color-scheme: light)"
scheme: default
primary: teal
accent: cyan
toggle:
icon: material/toggle-switch-off-outline
name: Switch to dark mode
- media: "(prefers-color-scheme: dark)"
scheme: slate
primary: cyan
accent: teal
toggle:
icon: material/toggle-switch
name: Switch to light mode
features:
- content.code.annotate
- content.tabs.link
- navigation.tabs
# - navigation.tabs.sticky # スクロールしてもタブ表示
# - navigation.expand # すべて展開した状態
- navigation.top # top み戻るボタン
- search.highlight
- search.suggest
- search.share
extra:
font:
text: "Noto Sans JP"
code: "Consolas"
search:
language: "en, ja"
# generator: false # fotter のマテリアルへのリンクを削除
# twiter / instagram などへのリンクをfotterに追加できる
# social:
# - icon: fontawesome/brands/twitter
# link: https://twitter.com/squidfunk
plugins:
- search # default enable
# # pip install mkdocs-git-revision-date-localized-plugin 必要
# - git-revision-date-localized:
# type: custom
# custom_format: "%Y/%m/%d %H:%M"
# timezone: Asia/Tokyo
# exclude:
# - index.md
# https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#caret-mark-tilde
markdown_extensions:
- fontawesome_markdown
- def_list
- pymdownx.critic
- pymdownx.caret
- pymdownx.keys
- pymdownx.mark
- pymdownx.tilde
- pymdownx.betterem # 文字の強調表現
- pymdownx.magiclink # URL はリンクとして扱う
- footnotes # 脚注
- tables # テーブル
- admonition
- pymdownx.details # !!! ではなく ??? と記述することで開閉可能に
- attr_list
- md_in_html
- abbr
- pymdownx.superfences:
custom_fences:
- name: mermaid
class: mermaid
format: !!python/name:pymdownx.superfences.fence_code_format
- pymdownx.highlight:
anchor_linenums: true
# linenums: true # code block に行番号の追加
- pymdownx.inlinehilite
- pymdownx.snippets
- pymdownx.tabbed: # タブ有効化
alternate_style: true
- pymdownx.emoji:
emoji_index: !!python/name:materialx.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg
options:
custom_icons:
- overrides/.icons # 任意のアイコンの使用を有効化
extra_css:
- https://unpkg.com/mermaid@9.0.0/dist/mermaid.css
- custom/custom_table.css
- custom/layout.css
- https://use.fontawesome.com/releases/v5.14.0/css/all.css
extra_javascript:
- https://unpkg.com/mermaid@9.0.0/dist/mermaid.min.js
copyright: © 2022 m.omuro
CSS ファイル#
layout#
layout.css
/* mkdocs 基本的な装飾 */
/* 見出し */
h2 {
border-bottom: 2px solid teal;
}
h3 {
font-weight: bold;
border-bottom: 2px dotted #000;
}
h4 {
font-weight: bold;
}
h5 {
font-weight: bold;
}
/* 見出しに改行を追加して間隔を調整 */
h2::before {
content: "\A" ;
white-space: pre ;
}
h3::before {
content: "\A" ;
white-space: pre ;
}
h4::before {
content: "\A" ;
white-space: pre ;
}
/* 段組 */
#columns {
column-count: 2;
}
/* 本文中への記載方法 (html)
<div id="columns">
<li>left 1</li>
<li>left 2</li>
<li>left 3</li>
<li>left 4</li>
</div>
*/
/* 見出しの色変更
https://uigradients.com/#Passion
*/
.md-header {
background: #77A1D3; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #E684AE, #79CBCA, #77A1D3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #E684AE, #79CBCA, #77A1D3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
/* ナビゲーションタブは見出しの色と統一 */
.md-tabs {
background: #77A1D3; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #E684AE, #79CBCA, #77A1D3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #E684AE, #79CBCA, #77A1D3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
/* ナビゲーションタブに絵文字追加 */
label.md-nav__link:before {
content: url(./icons/icons8-folder-16.png);
padding-right: 5px;
}
label.md-nav__link{
font-weight: bold;
/* 左寄席 */
justify-content: flex-start;
}
a.md-nav__link {
font-size: 0.6rem;
justify-content: flex-start;
}
a.md-nav__link:before {
content: url(./icons/dot.svg);
padding-right: 1px;
}
table#
custom_table.css
/* 基本的なテーブル */
table.basic_table{
table-layout: auto;
width: 100%;
border-collapse: collapse;
border: 1px solid #b7b7b7;
text-align: left;
}
table.basic_table th {
border: 1px solid #b7b7b7;
background-color: DarkTurquoise;
text-align: left;
padding: 3px 8px;
margin: 3px 8px;
font-weight: bold;
}
table.basic_table td {
border: 1px solid #b7b7b7;
text-align: left;
padding: 3px 8px;
margin: 3px 8px;
}
table.basic_table caption{
padding: 3px 8px;
margin: 3px 8px;
}
/** 罫線なし・list用 table */
table.list {
table-layout: auto;
width: 100%;
border: none;
}
table.list th {
border:none;
text-align: left;
padding: 3px 8px;
margin: 3px 8px;
font-weight: bold;
}
table.list td {
border:none;
text-align: left;
padding: 3px 8px;
margin: 3px 8px;
}
table.list caption {
font-weight: bold;
text-align: left;
}
/* caption tag の前に改行をいれて間隔調整 */
table.list caption::before{
content: "\A" ;
white-space: pre ;
}