---
title: 顏色自訂的程式碼區塊
description: 紀錄HackMD的一些模板設定
tags: 模板
lang: zh-tw
---

# 顏色自訂的程式碼區塊

## 黑色程式碼

<div style="background-color:black; color:white; padding:20px;">

帥!
帥!

</div>

---

## 紅色程式碼

<div style="text-align:center; background-color:#F4C2C2; color:#A40000; padding-top: 10px; padding-bottom:10px; padding-left:10px; padding-right:10px;">

<b><h3>帥翻惹!</h3></b>

文字ABCD

</div>

---

<div class="panel-body", style="background-color:#f2e6f4; border:2px #e9def2 solid; border-radius:8px;">
<span style="color: #6f4b8d">
<!-- span 裡面的 color 設定，可以放在 div 標籤裡。 -->

:bulb: **名稱對照與解釋**
- Tab : 標籤
- Global Filter : 「所有標籤」過濾器
- Local Filter : 「此標籤」過濾器 (每個 Tab 有屬於自己的 Local Filter)
- Canvas : 點選任一 Tab 所呈現的儀表板作業區
- 圖表元件 : Canvas上的每個資訊圖、清單、表格，都稱作一個元件

</span>
</div>

---

## bootstrap 面板

* [Bootstrap 面板 | 菜鸟教程](https://www.runoob.com/bootstrap/bootstrap-panels.html)

<div class="panel panel-default">
<div class="panel-heading">
不带 title 的面板标题
</div>
<div class="panel-body">
面板内容
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
带有 title 的面板标题
</h3>
</div>
<div class="panel-body">
面板内容
</div>
</div>

--

<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">面板标题</h3>
</div>
<div class="panel-body">
这是一个基本的面板
</div>
</div>