웹 게시판에 “원본 소스”를 보기 좋게 넣는 방법
작성자 정보
- 최고관리자 작성
- 192.♡.0.1 아이피
- 작성일
컨텐츠 정보
- 430 조회
- 목록
링크
첨부
본문
웹 게시판에 “원본 소스”를 보기 좋게 넣는 방법은 게시판 종류에 따라 다르므로, HTML/Markdown/일반 게시판 기준으로 함께 확인해 정리하겠습니다.
9s 동안 생각함
웹 게시판에 원본 소스를 보여주는 가장 안전한 방법은 코드블록입니다.
1) 마크다운 지원 게시판
가장 추천:
```yaml
esphome:
name: test-device
switch:
- platform: gpio
pin: GPIO5
name: relay
```
GitHub 문서도 코드 앞뒤에 삼중 백틱 ``` 을 넣는 방식을 안내합니다. 언어명을 붙이면 구문 강조가 됩니다.
2) HTML 지원 게시판
<pre><code>
esphome:
name: test-device
switch:
- platform: gpio
pin: GPIO5
name: relay
</code></pre>
pre는 줄바꿈/공백/들여쓰기를 유지하고, code는 소스 코드임을 표시합니다.
3) 웹페이지/블로그처럼 예쁘게 표시
Prism.js 또는 Highlight.js 사용:
<link href="prism.css" rel="stylesheet">
<script src="prism.js"></script>
<pre><code class="language-yaml">
esphome:
name: test-device
</code></pre>
Prism.js는 CSS/JS를 추가하고 <pre><code class="language-html"> 같은 형식으로 코드 하이라이트를 적용합니다.
4) 긴 원본소스는 접기 처리 추천
<details>
<summary>원본소스 보기</summary>
<pre><code>
여기에 원본소스 붙여넣기
</code></pre>
</details>
게시판 공유용 추천 형식
### 수정 전 원본소스
```yaml
원본소스
수정 후 소스
수정소스
변경 내용
GPIO 변경
센서 추가
오류 수정
게시판이 BBCode를 지원하는 경우 다음 형식을 사용합니다.
일반 소스
언어 지정이 가능한 게시판은:
esphome:
name: esp32_test
switch:
- platform: gpio
pin: GPIO5
name: Relay
또는
<div>Hello World</div>
.method public test()V
const/4 v0, 0x1
return-void
.end method
게시판별 차이
-
XE, Rhymix, 그누보드 일부 :
... -
phpBB :
... -
SyntaxHighlighter 플러그인 사용 게시판 :
... -
일부 게시판 :
[syntax=yaml]...[/syntax]
만약 사용 중인 게시판 주소(URL) 또는 게시판 종류(그누보드, XE, Rhymix, phpBB 등)를 알려주시면 실제 지원하는 코드 태그를 확인해 드
첨부 파일을 스킨보드에 구성 PDF보기( W:\g5\skin\board\BS4-Basic-Webzine_11q_pdf_php82\view.skin.php + view_pdf.php구성)
관련자료
-
이전
-
다음
댓글 0
등록된 댓글이 없습니다.