Dev Blog

스크립트 & 소스코드 공유

실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.

총 110건의 글

Markdown 사용법 - 기본 문법 완전 정리

Markdown의 기본 문법을 예제와 함께 정리한 글이다. 제목(h1~h6), 굵게·기울임·삭제선, 순서·비순서 목록, 링크와 이미지, 인용구, 인라인 코드와 코드 블록, 표, 분할선, LaTeX 수식까지 설명하고, marked.js 라이브러리로 HTML 페이지에서 Markdown을 렌더링하는 방법도 소개한다.

<!DOCTYPE html>
<html>
<head>
<title>Markdown 网页演示</title>
<!-- 引入解析库 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<!-- 存放转换后内容的容器 -->
<div id="content"></div>

<script>
const mdText = "# 这是一个标题\n\n这是来自 **Markdown** 的内容!";
// 执行转换并插入页面
document.getElementById('content').innerHTML = marked.parse(mdText);
</script>
</body>
</html><span style="font-family: 나눔고딕, Dotum, Helvetica, sans-serif;"><span style="white-space: normal;">
</span></span>

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成结构精美的 HTML。由于其简洁性和跨平台性,它已成为程序员、作家和笔记爱好者的首选工具。

以下是 Markdown 常用语法的详细讲解:

标题(Headings)

Markdown 支持六级标题,通过在行首插入 1 到 6 个 # 符号来表示。


# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

文本格式化

用于强调文本或改变其视觉表现。

  • 加粗:在文字前后分别加上两个星号 ** 或下划线 __。例如:**加粗文字**。

  • 斜体:在文字前后分别加上一个星号 * 或下划线 _。例如:*斜体文字*。

  • 加粗并斜体:在文字前后分别加上三个星号 ***。

  • 删除线:在文字前后分别加上两个波浪号 ~~。例如:~~删除的内容~~。

列表(Lists)

无序列表

使用星号 *、加粗 + 或减号 - 作为列表标记,后面紧跟一个空格。


- 项目一

- 项目二

- 子项目(缩进两个空格)

有序列表

使用数字外加一个英文句点 .,后面紧跟一个空格。


1. 第一步

2. 第二步

3. 第三步

链接与图片

这是 Markdown 中最常用的功能之一,注意括号的使用。

  • 超链接:语法为 [链接文字](URL)。例如:[Tabbit 官网]([https://tabbit-ai.com)。](https://tabbit-ai.com)`。)

  • 图片:语法为 ![替代文字](图片URL)。比链接多了一个感叹号。

引用(Blockquotes)

在段落的第一行前添加一个右尖括号 >。

这是一个引用示例。

引用可以嵌套,也可以包含其他 Markdown 语法。

代码(Code)

  • 行内代码:使用反引号 ` 包裹代码。例如:使用printf()函数。

  • 代码块:使用三个反引号 ``` 包裹,并可以指定语言名称以实现语法高亮。

def hello_world():

print("Hello, Markdown!")


### **表格(Tables)**

使用竖线 `|` 分隔单元格,使用连字符 `-` 分隔表头和其他行。

| 姓名 | 职业 | 技能 |

| :--- | :----: | ---: |

| Tabbit | AI 浏览器 | 网页自动化 |

| 开发者 | 工程师 | Python/JS |

*注:在连字符行中使用冒号可以控制对齐方式(左对齐 `:---`、居中 `:---:`、右对齐 `---:`)。*

### **分割线**

在一行中使用三个或更多的星号 `*`、减号 `-` 或底线 `_` 来建立分隔线,行内不能有其他内容。

---

### **数学公式(LaTeX)**

虽然不是标准 Markdown 的一部分,但大多数现代编辑器(如 Tabbit)都支持 LaTeX 语法:

- **行内公式**:使用单个 `$` 包裹。例如:$E = mc^2$。

- **独立公式块**:使用双 `$$` 包裹。

$$

\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

$$

掌握了以上这些基础语法,你就可以撰写出排版专业且美观的文档了。

Python 외부 관리 환경(PEP 668) 오류 - 가상환경 활성화 방법

Python 패키지 설치 시 "externally managed environment"(PEP 668) 오류가 발생할 때의 해결 방법이다. python -m venv로 가상환경을 만들고 Windows CMD·PowerShell, macOS/Linux에서 활성화하는 명령을 단계별로 안내한다. uv 패키지 매니저 사용법과 --break-system-packages로 강제 설치할 때의 위험성도 함께 설명한다.

你再次遇到了“externally-managed-environment”错误,并且它建议你查看 PEP 668 和使用 --break-system-packages 来强制安装。使用这个选项可以临时绕过限制,但可能会对环境稳定性造成风险。为了安全起见,我建议你考虑以下更稳妥的解决方案:

推荐解决方案

创建虚拟环境
使用虚拟环境是比较安全且推荐的处理方式,它允许你在不影响系统环境的情况下安装和管理 Python 包:

python -m venv myenv 

激活虚拟环境:
Windows(CMD):

myenv\Scripts\activate 

Windows(PowerShell):

.\myenv\Scripts\Activate.ps1 

macOS/Linux:

source myenv/bin/activate 

激活之后,就可以尝试再次执行:

python -m pip install --upgrade pip python -m pip install -r requirements.txt 

了解 uv 提供的包管理方式
如果因为某些原因你不能或不想使用虚拟环境,你可以查看 uv 管理器的文档,看看是否有提供专门的命令来管理 Python 包。

如果决定使用 --break-system-packages

在极端情况下,如果你确实需要在 uv 管理的系统环境中安装包,并且你已经考虑过可能的风险,可以执行以下命令:

python -m pip install --break-system-packages -r requirements.txt 

请谨慎使用这个选项,并确保你有能力恢复环境或者安全备份重要文件。

如果需要更多指导,请随时告诉我!

리눅스 서버에서 폴더별 용량 확인 및 삭제 방법 (du, rm)

리눅스 서버에서 du 명령어로 폴더별 디스크 사용량을 확인하는 방법을 정리했다. du -sh로 각 폴더 요약 확인, 특정 경로의 하위 폴더별 용량, 재귀적 용량 표시, sort -hr로 큰 폴더 순 정렬을 설명하고, rm -rf로 폴더를 삭제할 때 되돌릴 수 없으므로 백업 후 신중하게 사용해야 한다는 주의사항을 강조한다.

리눅스 서버에서 폴더별 용량을 확인하려면 주로 du 명령어를 사용합니다. 예를 들어:

  1. 현재 디렉토리 내 각 폴더 용량 확인:
    du -sh */ 
  • du : 디스크 사용량(disk usage)을 표시하는 명령어
  • -s : 각각의 디렉토리에 대해 합계만 출력 (요약)
  • -h : 사람이 읽기 쉬운 형식(human-readable), KB/MB/GB 단위로 표시
  • */ : 현재 디렉토리 내 폴더들만 대상으로 함
  1. 특정 경로 내 폴더별 용량 확인:
    du -sh /path/to/directory/*/ 
  2. 하위 폴더까지 재귀적으로 모두 용량 표시:
    du -h /path/to/directory 
  3. 용량이 큰 폴더부터 정렬해서 보고 싶다면:
    du -sh /path/to/directory/* | sort -hr 
  • sort -hr : 숫자를 크기 순서로 역정렬(human-readable 숫자도 인식)

리눅스 서버에서 /www/css/images 폴더를 삭제하려면 rm 명령어를 사용합니다. 폴더(디렉토리)를 삭제하려면 -r 옵션(재귀적 삭제)과 -f 옵션(강제 삭제)을 함께 쓰는 것이 일반적입니다.

다음 명령어를 터미널에 입력하세요:

rm -rf /www/css/images 

설명:

  • rm : 파일/폴더 삭제 명령어
  • -r : 디렉토리 및 그 안의 모든 파일과 하위 디렉토리를 재귀적으로 삭제
  • -f : 강제로 삭제, 삭제 확인 메시지 없이 처리

주의:

  • 해당 폴더와 그 안의 모든 파일이 완전히 삭제되므로 매우 신중히 사용하세요.
  • 삭제 후에는 복구가 어렵습니다.
  • 필요하다면 삭제 전에 백업을 권장합니다.

삭제 권한 문제가 있으면 sudo를 붙여 관리자로 실행하세요:

sudo rm -rf /www/css/images 

CSS로 OL 목록 번호에 앞자리 0 붙이기 (counter + ::before)

ol 목록의 번호를 01, 02처럼 10 미만에서 앞자리 0을 붙여 표시하는 CSS 방법이다. 기본 번호를 숨기고, ol에 counter-reset으로 카운터를 초기화한 뒤 li의 ::before에서 counter-increment로 증가시키고 content: counter(목록, decimal-leading-zero)로 번호를 생성하는 3가지 구현 방식을 정리했다.

要实现 有序列表(<ol>)的序号小于 10 时前面补零(如 01, 02, ..., 09, 10, 11...),核心思路是:隐藏默认序号,用 CSS 伪元素 ::before 动态生成带前导零的序号。

以下是 3 种主流实现方法,从简单到灵活,覆盖不同场景:

一、最推荐:纯 CSS counter + ::before(无需 JS,兼容性好)

利用 CSS 计数器 counter-reset/counter-increment 统计列表项数量,再通过 ::before 伪元素显示序号,配合 content 拼接前导零。

核心原理:

  1. counter-reset: list-counter 0:在 <ol> 上初始化计数器,起始值为 0(默认从 1 开始,这里显式设 0 更清晰)。
  2. counter-increment: list-counter 1:在每个 <li> 上递增计数器,每次 +1。
  3. content: counter(list-counter, decimal-leading-zero):用 decimal-leading-zero 格式显示计数器(自动为 1-9 补零)。

인터넷 canvas 이미지를 다운로드하는 방법 (toDataURL)

브라우저 개발자 도구를 이용해 페이지의 canvas 이미지를 저장하는 방법이다. Elements 패널에서 canvas를 찾아 "Store as Global Variable"로 저장한 뒤, 콘솔에서 canvas.toDataURL("image/png")로 이미지 데이터를 추출하고 a 태그의 download 속성으로 파일로 저장한다. cross-origin 이미지로 toDataURL()이 실패하는 경우의 대안도 설명한다.

  1. Elements 패널에서 <canvas> 태그를 찾고 오른쪽에서 스타일 또는 속성을 확인하세요.
  2. 우클릭 메뉴에서 “Store as Global Variable”을 선택합니다.
  3. 콘솔에서 위와 같은 방법(canvas.toDataURL())으로 이미지 데이터를 추출 후 저장 가능합니다.
  • canvas 내부에 이미지가 그려지는 방식에 따라 보안상 이유로 toDataURL()이 실패할 수 있습니다. (예: Cross-Origin 이미지가 캔버스에 포함된 경우)
  • 만약 toDataURL()이 반환되지 않거나 오류가 발생하면 이미지 소스 자체를 따로 다운로드해야 할 수 있습니다.

var canvas = $0; // $0는 마지막 선택된 요소를 가리킵니다.

var dataURL = canvas.toDataURL("image/png");

var a = document.createElement('a');

a.href = dataURL;

a.download = 'canvas-image.png'; // 저장될 파일명 지정

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

canvas 요소 제대로 선택했는지 확인

  • var canvas = $0; 에서 $0이 실제 <canvas> 요소인지 확인하세요.
  • 콘솔에 console.log(canvas); 입력해 보고 canvas 요소 객체가 잘 나오는지 확인해보세요.

직접 data URL을 새 탭에 복사해서 열기

  • toDataURL()이 정상적으로 결과를 반환하면, dataURL 자체가 엄청 길 수도 있는데, 콘솔에 들어오는 문자열을 다 복사해서 새 탭 주소창에 붙여넣기 하면 이미지가 나옵니다.


Let's create something great together.

프로젝트 문의 및 견적 요청은 언제든 환영합니다.