블로그스팟 포스트에 파이썬 코드블럭 CSS 추가 설정하는 방법

블로그스팟(Blogger)에서 파이썬 코드를 효과적으로 나타내려면 highlight.js라는 자바스크립트 라이브러리를 사용하는 것이 가장 일반적이다. 이 방법은 코드에 구문 강조(syntax highlighting)를 적용하여 가독성을 높여준다.

구글 블로그스팟 파이썬 코드블럭 추가

기능 설명

  • highlight.js는 수백 가지 프로그래밍 언어를 지원하는 오픈소스 자바스크립트 기반의 코드 구문 강조 라이브러리이다.
  • 다양한 스타일 테마를 제공하여 블로그 디자인에 맞게 스타일을 선택할 수 있다.

간단한 사용법

  1. 블로그스팟 관리 페이지에서 HTML 편집기로 이동한 후, <head> 태그 영역 안에 다음의 코드를 추가한다:
  2. <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/>
    <script>hljs.initHighlightingOnLoad();</script>
    
  3. 블로그 글 작성 시 HTML 모드로 전환하여, 파이썬 코드를 <pre><code> 태그로 감싼다:
  4. <pre><code class="language-python">
    # Python 예시 코드
    def greet(name):
        print(f"Hello, {name}!")
    
    greet("World")
    </code></pre>
    
    • 인라인 코드(짧은 코드 조각)는 <code> 태그만 사용하면 된다:
    파이썬에서 <code>print()</code> 함수는 출력을 담당합니다.
    

간단한 사용법 요약

  1. Blogger 블로그의 HTML 편집기로 이동한다.
  2. highlight.js CDN 링크를 <head> 태그 내에 추가한다.
  3. 본문 작성 시 HTML 모드로 전환한 후, 코드 블록을 <pre><code class="language-python">...</code></pre>로 감싼다.

사용 후기 및 장단점

  • 장점
    • 간단한 설정으로 다양한 언어 지원 가능
    • 가독성이 뛰어나 독자들이 쉽게 이해할 수 있음
    • 다양한 테마를 통해 원하는 스타일로 커스터마이징 가능함
  • 단점
    • Blogger의 기본 에디터에서 코드를 붙여 넣으면 자동으로 <p> 태그가 추가되어 불필요한 공백이 생길 수 있어, HTML 모드에서 직접 수정해야 하는 번거로움이 있다.
from transformers import AutoModelForCausalLM, AutoTokenizer

model_name = "Qwen/QwQ-32B"
model = AutoModelForCausalLM.from_pretrained(model_name, torch_dtype="auto")
tokenizer = AutoTokenizer.from_pretrained(model_name)

text = tokenizer.apply_chat_template("Your input text here", add_generation_prompt=True)
inputs = tokenizer([text], return_tensors="pt").to(model.device)

generated_ids = model.generate(**inputs, max_new_tokens=32768)
output_text = tokenizer.decode(generated_ids[0], skip_special_tokens=True)

대체로 highlight.js는 블로그스팟 사용자들 사이에서 가장 널리 추천되는 방법이며, 설정과 사용법이 직관적이고 결과물이 깔끔하여 만족도가 높다.

다음 이전

POST ADS 2