작성 시 깨짐현상

1. 그분선, 인용문, 표는 "마크다운"작성 후, 글을 수정하면 기본모드에서 형식이 tistory인용으로 변경됨.

2. 링크 입력 시, 링크명과 URL, 설명이 그대로 표시됨.

※ Markdown 개발자 사이트 : https://daringfireball.net/projects/markdown/

※ Github Markdown 설명 :https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax 

Markdown Test

======================

Header1

Header2

Header3

Header4

Header5

Header6

# Markdown Test
======================
# Header1

## Header2

### Header3

#### Header4

##### Header5

###### Header6

강조

xx 이탤릭
xx 볼드

xxx 취소

*xx 이탤릭*
**xx 볼드**
~~xxx 취소~~

포맷 무시

*강조* 안하기

### 포맷 무시
\*강조\* 안하기

번호 목록

1. 하나
2. 둘
3. 셋
4. 1번 다시

1. 하나
2. 둘
3. 셋
1. 1번 다시

글머리 기호 목록

• 대쉬
• 별표
• 더하기

- 대쉬
* 별표
+ 더하기

번호, 글머리 같이

1. 하나
   • 대쉬1
   1. 하나2
   2. 둘2
   • 대쉬2
2. 둘
3. 셋

1.  하나
    -   대쉬1
    1.  하나2
    2.  둘2
    -   대쉬2
2.  둘
3.  셋

링크

[Google] (https://google.com) "설명"
[상대적 참조] [Naver]
[Naver] : https://naver.com

[Google] (https://google.com) "설명"
[상대적 참조] [Naver]
[Naver] : https://naver.com

구분선

---
***
* * *
- - -

인용구

인용문

인용문2

인용문3

> 인용문

>> 인용문2

>>> 인용문3

코드블럭

s = "Python syntax highlighting"
print s

```python
s = "Python syntax highlighting"
print s
```

표

| 값 | 의미 | 기본값 |
| --- | :-: | --: |
| `static` | 유형(기준) 없음 / 배치 불가능 | `static` |
| `relative` | 요소 자신을 기준으로 배치 | |
| `absolute` | 위치 상 부모(조상)요소를 기준으로 배치 | |
| `fixed` | 브라우저 창을 기준으로 배치 | |

이모지

😄
https://steemit.com/steemkr-guide/@snow-airline/steemkr-quick-start-guide

😄
https://steemit.com/steemkr-guide/@snow-airline/steemkr-quick-start-guide

이미지

### 이미지

![대체 텍스트(alternative text)를 입력하세요!](http://www.gstatic.com/webp/gallery/5.jpg "링크 설명(title)을 작성하세요.")

![Kayak][logo]

[logo]: http://www.gstatic.com/webp/gallery/2.jpg "To go kayaking."

티스토리에서, 글쓰기 모드를 "기본모드"에서 "마크다운"모드로 변환하면 빠르게 html 방식 양식으로 글을 작성할 수 있다.

제목1 (h1)

# 제목1 (h1)

제목2 (h2)

## 제목2 (h2)

제목3 (h3). h6까지 가능.

### 제목3 (h3)

- - - - - - - - - - - - -

인용문입니다. 새문단은 한 칸 띄우고 ">"로 라인을 분리한다.

인용문내 제목입니다.

> 인용문입니다. 새문단은 한 칸 띄우고 ">"로 라인을 분리한다.

>

> # 인용문내 제목입니다.

- - - - - - - - - - - - -

• 별표입니다.
• 플러스 입니다.
  • 리스트 입니다.

* 별표입니다.

+ 플러스 입니다.

   - 리스트 입니다.

- - - - - - - - - - - - -

1. 하나
2. 둘
3. 셋

1. 하나

2. 둘

3. 셋

- - - - - - - - - - - - -

강조입니다.
**강조입니다.**

강조 이텔릭체
_강조 이텔릭체_

취소 - 중간에 줄 쫘악

취소~

취소

- - - - - - - - - - - - -

다음 링크입니다.

[다음 링크입니다.](http://www.daum.net)

- - - - - - - - - - - - -

테이블 표기

| foo | bar |
| --- | --- |
| baz | bim |
| foo | bar |

| abc | defghi |
| :-: | --: |
| bar | baz |

- - - - - - - - - - - - -

코드블럭

void main(String args[]) {
    println("Hello, world!");
}

```

void main(String args[]) {
println("Hello, world!");
}

```

- - - - - - - - - - - - -

수평선 - 바 셋

---

ps. 참조자료

[GitHub Flavored Markdown Spec] (https://github.github.com/gfm/)

tistory에 Google Adsense 설정을 했는데, "Google Adsense"만 보일 때 해결 방법.

1. 현상

 - 목록이나, 본문에서 "Google Adsense" 배너만 보이고 광고가 표시 되지 않는다.

 - 목록에는 광고가 표시되고, 본문에는 광고가 표시되지 않는다.

 - PC에는 광고가 표시되고, 모바일에는 광고가 표시되지 않는다.

단, "Google Adsense" 설정이 되었다고 가정한다.

 - "Google Adsense"에서 배너 생성하고, 공개할 것.

2. 해결방법

 - 몇가지 테스트 해본 결과, 스킨에 따라 "Google Adsense"의 광고 표시여부가 영향을 받았고,

    게시글에 따라서 일부는 광고가 표시되지 않고, 배너만 보였습니다.

 - 2021년 4월 1일 기준으로 스킨은 PC와 모바일 및 목록, 본문에 정상적으로 표시되는 스킨은 "Book Club"만 가능했습니다.

   . "Book Club"스킨으로 변경 하면, 모바일 광고가 잘 뜹니다. 다를 스킨은 모바일은 목록 및 본문 모두  배너만 뜨네요.

   . 일부 스킨은 목록에서는 광고가 뜨지만, 내용에서는 광고 표시가 안됩니다.

 - 설정 후에도, "Google Adsense"의 바로 광고가 표시안될 수 있는데, 광고 알고리즘 때문 인 것 같습니다. (추측)

   자주 노출이 되거나, 컨텐츠 내용 까지도 분석하고 있는게 아닌가 하는 생각도 드네요.

 1) 스킨을 Book Club 으로 변경한다.

 2) 관리자화면 스킨 > 에드센스 관리 > 광고 에서 목록, 본문 등 광고 노출 설정을 한다.

 3) 필요 시, 스킨편집에서  모양을 편집한다.

end.

tistory에서 "관리자 > 플러그인 > Syntax HighLight"를 사용해서 하거나,

제공하는 플러그인을 사용하지 않고, 직접 관련 모듈을 사용할 수 있다.

많이 사용하는 모듈은 아래 highlightjs 하고

https://highlightjs.org/

  - 오픈소스 사이트로 직접 css와 script를 import 할 수도 있고, 다운로드 받아서 tistory에 업로드 후 사용도 가능함. 

라인넘버를 표시하기 위해서는 아래 추가 모듈이 필요하다.

https://github.com/wcoder/highlightjs-line-numbers.js

위, 두 소스를 받아서 tistory에 업로드 후 설정하는 방법으로 진행하기로함.

이유는 관련 사이트 장애나, 사이트 접근이 안되는 경우가 생길 수 있어서 tistory로 업로드하기로 함.

1. 관련 소스를 tistory에 업로드 후 설정하는 방법

 - 스킨이 변경되면, 업로드한 소스가 모두 삭제되므로 변경될 때마다 다시 설정이 필요함!!!

 - 관리자 > 꾸미기 > 스킨편집 화면에서, 맨 우측 상단 "html편집"으로 들어가면, 

   "HTML | CSS | 파일업로드" 메뉴가 보인다.

1.1 파일업로드

 a) highlightjs

  - agate.css : 다크모드 의 스타일 선택함. 필요한 스타일만 올리면 됨. (demo : https://highlightjs.org/static/demo/)

  - highlight.pack.js : java script

 b) highlightjs-line-numbers

  - highlightjs-line-numbers.js : java script

1.2 HTML 수정

 - head 태그 부분에 스크립트 추가

 - 스타일에 따라서 맨아래 함수에서 오류날 수 있음. jQuery를 지원하지 않는 스타일 소스 인 듯.

 - 또는, 소스 적용 후 원하지 않는 화면 결과가 나오면 수정하거나 수정이 힘들면 다른 스타일로 변경할 것. 

<script src="./images/highlight.pack.js"></script> 
<script src="./images/highlightjs-line-numbers.js"></script> 
<link rel="stylesheet" href="./images/tomorrow-night.css" /> 
<script> 
  hljs.initHighlightingOnLoad(); 
  hljs.initLineNumbersOnLoad(); 
  $(document).ready(function() { 
    $('code.hljs').each(function(i, block) { 
      hljs.lineNumbersBlock(block); 
    }); 
  }); 
</script>

1.3 CSS 수정

.hljs-ln-numbers { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    
    text-align: center; 
    color: #ccc; 
    border-right: 1px solid #ccc; 
    vertical-align: top;
    padding-right: 5px;
}

.hljs-ln td.hljs-ln-code {
    padding-left: 10px;
}

2. 사용법

1) 글작성 시 툴바 "..."을 클릭 후,  "<> 코드 블록"으로 먼저 작성한다.

 - 이때 <> 같은 기호가 html 태그로 변환된다.

2) 툴바 "기본모드" 선택 후 "HTML"모드를 선택한다.

 - "<>코드 블록"을 찾아서, highlight모듈의 표기로 수정한다.

   표기법1) 기본적으로 자동으로 소스 형식을 찾는다. 만약 찾지 못하면 class태그를 붙인다.

     <pre><code>소스코드</code></pre>

   표기법2) 기본적으로 자동으로 소스 형식을 찾는다. 만약 찾지 못하면 class태그를 붙인다.

     <pre><code class="java">소스코드</code></pre>

end.