2012-04-30 3 views
4

블로그 게시를해야합니다. 그 때문에 내 프로그램의 일부 코드를 붙여야합니다.HTML의 코드 블록을 사용하는 방법

은 내가 코드 또는 사전를 사용하여 시도이

Similar to this 

이 코드 블록의 사용은 유사한 만들고 싶어하지만, 동일한 출력을 생성하지 않았다.

HTML로 만드는 방법은 무엇입니까?

+1

구문 강조 표시를 찾으려면 타사 솔루션이 필요합니다. 자바 스크립트 라이브러리 또는 서버 사이드 스크립트. – Nadh

답변

3

계단식 스타일 시트 (CSS)로 만들 수 있습니다. 원하는 모양으로 CSS를 만들고, <code>으로 표시된 것은 그 모양을 유지해야합니다. 예를 들어 :

<html> 
<head> 
<style type="text/css"> 
code { background-color: gray; color: blue; } 
</style> 
</head> 
<body> 
<p>Some code:</p> 
<code>My code...</code> 
</body> 
</html> 

당신은 t CSS에 서식 할 수 있습니다. 키워드와 같은 짧은 텍스트 블록에는 <span class="small_block">을 사용하고 큰 블록에는 <div class="big_block">을 사용하십시오. 모양을 정의하기 위해 머리글의 스타일 섹션에 small_block 및 big_block에 대한 항목을 만듭니다. 그러나 그보다 나은 클래스 이름을 사용하십시오. :). 재미있어!


업데이트 : 깊은 아래, 강조가 제대로 위에서 간단하고 수동으로 표시, CSS를 통해 이루어집니다 (기술적으로 인라인 스타일도 가능하지만, 그 못생긴 솔루션입니다). 다른 답변에서 볼 수 있듯이 페이지가 렌더링 될 때 소스 코드 블록을 검사하고 강조 표시하는 JavaScript를 사용하여 강조 표시 프로세스를 자동화 할 수있는 라이브러리가 있습니다. 그들은 기본적으로 풍부한 CSS를 제공하고 spandiv 태그를 자동으로 적용하고 언어 별 규칙을 적용하여 최신 IDE 편집기와 같이 코드를 매우 정교하게 표시 할 수 있습니다.

+0

굉장 :)) ....... –

+1

이것은 간단한 한 줄짜리 게시물에 대한 딸꾹질의 빠른 해결책이지만 50+ 줄인 코드의 복잡한 목록은 악몽이 될 것입니다 – Phlume

관련 문제