본문 바로가기
Tips, Infomation/Coding Editor

[MARK DOWN]md file, markdown 글씨 색깔 넣기.

by 소나무기운 2021. 10. 18.
반응형

[2025/08/12] css형식으로 한방에 추가하기

[2021-10-18] 처음시작

 

소나무 기운 ,  전자제품 개발/생산

[MARK DOWN] 글씨 색깔 넣기.

mark down 파일에서 글씨에 색상 넣기.

 

 

글씨 색깔 넣기.

<span style="color:red">

빨강 글씨

Red Font

</span>

 

 

 

색깔 종류

red
yellow
blue
brown
orange
green
violet
black
yellowgreen
blueviolet
white
greenyellow
indigo
gray

국가표준기술원 표준색

 

 

 

CSS스타일 넣어 반영

CSS스타일 처럼 값을 넣으면 좀더 쉽게 작업할 수 있어요.

다크 스타일 예시

<style>
  body { background: #181818; color: #f5f5f5; }
  h1 { color: #90caf9; background: #212121; padding: 6px 12px; border-radius: 6px; }
  h2 { color: #a5d6a7; background: #263238; padding: 4px 10px; border-radius: 5px; }
  h3 { color: #f06292; background: #212121; padding: 3px 8px; border-radius: 4px; }
  h4 { color: #ffb74d; background: #212121; padding: 2px 6px; border-radius: 3px; }
  h5 { color: #4dd0e1; background: #212121; padding: 2px 5px; border-radius: 2px; }
  h6 { color: #fff176; background: #212121; padding: 1px 4px; border-radius: 2px; }
  p { color: #f5f5f5; font-size: 1.05em; line-height: 1.7; }
  ul, ol { color: #e0e0e0; font-size: 1em; }
  li { color: #eeeeee; margin-bottom: 4px; }
  code, pre { background: #333; color: #ffd54f; border-radius: 4px; padding: 2px 6px; font-size: 0.98em; }
  blockquote { color: #b0bec5; background: #263238; border-left: 4px solid #90caf9; padding: 6px 12px; margin: 8px 0; }
  table { background: #212121; border-collapse: collapse; }
  th { background: #263238; color: #90caf9; padding: 6px; }
  td { background: #212121; color: #f5f5f5; padding: 6px; }
</style>


# 프로그램 정보
  ## 개요
  이 프로그램은 전광판 업체의 M10모브와의 표준 프로토콜이 적용된 프로그램입니다.

  ## 부착 센서 정보
  센서 두가지가 적용됩니다.
  1. 산소
  2. 질소

## LDM 연결 방법
두개의 LDM을 연결해서 1번 채널에 연결한다.
또 두개의 LDM을 연결해서 2번 채널에 연결한다.

## LDM 표시 내용.
두개의 LDM이 연결된 것에서 한개는 숫자. 다른 한개는 단위를 설정한다.

## LDM 표시 색각 정의
## 센서별 단위 표시 내용
### 센서 1 : 

### 센서 2 :

 

VSCode에서의 미리보기 화면입니다.

 

화이트모드를 사용한다면

<style>
  h1 { color: #1565c0; background: #e3f2fd; padding: 6px 12px; border-radius: 6px; }
  h2 { color: #388e3c; background: #e8f5e9; padding: 4px 10px; border-radius: 5px; }
  h3 { color: #ad1457; background: #fce4ec; padding: 3px 8px; border-radius: 4px; }
  h4 { color: #6d4c41; background: #efebe9; padding: 2px 6px; border-radius: 3px; }
  h5 { color: #00838f; background: #e0f7fa; padding: 2px 5px; border-radius: 2px; }
  h6 { color: #fbc02d; background: #fffde7; padding: 1px 4px; border-radius: 2px; }
  p { color: #212121; font-size: 1.05em; line-height: 1.7; }
  ul, ol { color: #263238; font-size: 1em; }
  li { color: #37474f; margin-bottom: 4px; }
  code, pre { background: #f5f5f5; color: #d84315; border-radius: 4px; padding: 2px 6px; font-size: 0.98em; }
  blockquote { color: #455a64; background: #eceff1; border-left: 4px solid #90caf9; padding: 6px 12px; margin: 8px 0; }
  table { background: #fafafa; border-collapse: collapse; }
  th { background: #bbdefb; color: #0d47a1; padding: 6px; }
  td { background: #e3f2fd; color: #263238; padding: 6px; }
</style>

 

 

 

마무리

글씨에 색을 입혀 md파일을 좀더 명료하게 작성 가능하다.

 

 

참고문헌

 
 

 

 

틀린 부분이나 질문은 댓글 달아주세요.

즐거운 하루 보내세요. 감사합니다.

 

 

반응형

댓글