Tips - 小技 - (4) コードリスティングのスタイル変更

Qiita・chatGPTライクなリスティングスタイルへ変更

• 外観の変更

• 垂直スクロールバーの追加

• コピーボタンの追加

外観の変更

• custom.css に記載．

/* ------------------------------------------ */
/* -- literalinclude, code-block スタイル  -- */
/* ------------------------------------------ */
div.highlight,
div.highlight pre,
pre.literal-block {
    position: relative;     /* copybtn位置制御のために必要な場合が多い */
    background: #1e1e1e ;
    color: #d4d4d4 ;
    font-family: Ricty, Consolas, Menlo, Monaco, "Courier New", monospace ;
    border-radius: 6px ;
    padding: 1em ;
    font-size: 0.95em ;
    line-height: 1.5 ;
    white-space: pre ;  /* 自動折り返し禁止 */
    box-sizing: border-box;
}

垂直スクロールバーの追加

• custom.css に記載．

/* -------------------- */
/* 横・縦スクロール対応 */
/* -------------------- */
div.highlight pre {
    overflow-x: auto ;
    overflow-y: auto ;
    max-height: 400px ;  /* 必要に応じて調整 */
    max-width: 100% ;
}

コピーボタンの追加

コピーボタン機能を pip install

pip install sphinx-copybutton

conf.pyへ設定追記

# -- copy button -- #
#
#   need. -> $ pip install sphinx_copybutton   #
#
extensions += ['sphinx_copybutton']
copybutton_prompt_text = r'>>> |\.\.\. |\$ '
copybutton_prompt_is_regexp = True
#
# -- copy button -- #

custom.cssへ設定追記

/* ----------------- */
/* コピーボタン 設定 */
/* ----------------- */
div.highlight .copybtn {
    /* -- */
    /*  -- ボタン外観 -- */
    /* -- */
    position: absolute;
    top: 16px;             /* 上からの位置        */
    right: 24px;           /* 右からの位置        */
    z-index: 10;           /* 重ね位置（最前面）  */
    background-color: aqua ;
    color: navy ;
    border: none;
    border-radius: 6px;
    padding: 3px 3px;      /* 内側余白サイズ      */
    font-size: 1.2em;      /* アイコンサイズ      */
    opacity: 0.4;          /* 1：透明, 0：不透明  */
    cursor: pointer;
    transition: background-color 0.3s, opacity 0.3s;
}
div.highlight .copybtn:hover {
    /* -- */
    /* -- マウスホバー -- */
    /* -- */
    background-color: aqua ;
    opacity: 0.8 ;
}