Blogger에서 블로그에 사용할 코드 스 니펫 서식 지정 [닫기]

282

내 블로그는 Blogger에서 호스팅되며 C/ C#/ Java/ XML등의 코드 스 니펫을 자주 게시 하지만 스 니펫이 "혼합 된"것으로 확인됩니다.

미리 스 니펫을 구문 분석하고 서식을 정렬하고 XML " <"을 " &lt;" 로 변환하는 데 사용할 수있는 웹 사이트가 있습니까?

SO에 대해이 영역 주위에 많은 질문이 있지만이 질문을 직접 해결하는 것을 찾을 수 없습니다.

Edit:들어 @ 부자의 대답 사이트 상태가 "귀하의 사이트에 포맷 된 코드를 표시하려면이 CSS 스타일 시트를 얻을, 그리고에 대한 참조를 추가해야 <head>페이지의 섹션" . 이것이 문제입니다. Blogger AFAIK에서는이 작업을 수행 할 수 없습니다.

formatting  blogs  blogger 
— rbrayb
소스
3
형식이 지정된 코드를 표시하려면 Visual Studio를 사용하는 경우 모든 유형의 코드 html / css / javascript / c # 등을 블로거에 복사 할 수 있습니다. Visual Studio 생산성 도구를 설치해야합니다. 자세한 내용은 다음을 참조하십시오 : coding-issues.blogspot.in/2013/10/…
— Ranadheer Reddy
플러그인 Blogger 오프라인 편집 기용 Windows Live Writer 용 Visual Studio 코드 로 붙여 넣기를 사용해보십시오 . 위지 위그! .
— herohuyongtao
당신은 누락 소셜 콘텐츠 사물함 워드 프레스 등이? 이제 블로거에서도 이것을 추가 할 수 있습니다 stackoverflow.com/questions/27619171/…
— craig lerr
1
이 웹 사이트를 사용하여 다양한 언어의 코드 스피릿 하이라이트 코드를 얻을 수 있습니다. 블로그에 게시 할 수있는 html을 제공합니다 hilite.me
— Bhavikkumar
코드를 intellij로 복사하여 블로그에 붙여 넣을 수 있습니다. 그것은 내 블로그에 나를 위해 마법처럼 작동합니다 - codetails.blogspot.com/2017/11/design-pattern-in-java.html
— user3871494

답변:

253

syntaxhighlighter 2.0을 사용하여 블로거에 코드 구문 강조 표시를 추가하는 방법을 설명하는 블로그 게시물 항목을 만들었습니다.

내 블로그 게시물은 다음과 같습니다.

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

나는 그것이 당신들에게 도움이되기를 바랍니다.

— 교활한 펠라
소스
2
여전히 작동하는지 확인할 수 있습니까? </head>섹션 바로 앞에 스크립트 태그를 붙여넣고 코드 주위에 사전 태그를 추가했습니다. 그래도 변화는 없습니다.
— arviman
2
나는 그것에 몇 시간을 보냈는데 전혀 작동하지 않습니다.
— thepaulpage
1
DYNAMIC 뷰 블로거에서 제대로 작동하지 않습니다. 대안을 제공 할 수 있습니까? 동적보기 satindersinght.blogspot.in
— Satinder singh
1
복사하여 붙여 넣어야하는 코드, 맨 위에 <script> 태그가없는 것 같습니다.
— 존 리틀
1
사무엘의 대답 이 훨씬 낫습니다. 나는 단지 구문 강조를 위해 블로그에 너무 많은 자바 스크립트를 추가하는 것을 좋아하지 않습니다. 특히 강조 할 구문이없는 페이지는 과잉입니다.
— divinedragon
126

코드를 공유하는 가장 쉬운 방법은 공공 요원과 공유하는 것입니다. 하나만 작성하고 소스 코드에 붙여 넣으십시오. 쉬워요.

http://gist.github.com

검색 엔진 문제를 해결하기 위해 다음 div과 같이 페이지에 숨겨진 것을 사용할 수 있습니다 .

<div style="display:none"> content </div>
— 요 다이스 그린
소스
친구, 20 분 정도 사용한 후에는 고마워요! 가장 좋은 서식, 번거롭지 않고 모든 코드가 한곳에 있고 게시물이 아름답게 보이고 게시물의 나머지 부분과 코드를 섞지 않고 게시물 편집이 매우 쉽습니다. 어리 석고 코드를 잃어 버릴 수 있습니다. 고맙습니다 남자!
— Elijah Saounkine
19
임베드는 자바 스크립트이므로 검색이 보이지 않을 가능성이 높습니다. 그것은 블로그 게시물을 거의 죽입니다.
— James Moore
6
나는 현재 요지를 사용하고 있지만 아마도 SyntaxHighlighter를 다시 사용할 것입니다. 요점은 JavaScript를 사용하여 RSS 리더에서도 액세스 할 수 없게 할뿐만 아니라 모든 요지가 순차적으로 다운로드되어 렌더링을 차단하므로 페이지로드 속도가 느려집니다. 좋은 선택이 아닙니다.
— Tomasz Nurkiewicz
감사! 당신은 내 하루를 만들었습니다. : 난 그냥 블로거에 요점을 추가하기 위해이 스크립트를 공유 할 github.com/moski/gist-Blogger
— daniel.sedlacek을
1
이 아이디어는 실제로 잘 작동합니다! 결과는 단지 내가 원하는 것입니다. 멋지게 포맷 된 코드 ...하지만 나는 그것을하지 않을 것입니다. 차라리 내 게시물을 완성하고 끝내고 싶습니다. 게시물의 일부이며 다른 곳에서 호스팅되고 js를 통해 포함 된 코드를 사용하면이를 막을 수 있습니다!
— 데이 드
63

내 블로그에서는 http://hilite.me/ 를 사용 하여 소스 코드를 형식화합니다. 그것은 많은 형식과 출력을 지원합니다. 그러나 코드 스 니펫이 많은 경우 많은 복사 붙여 넣기를 수행해야합니다. 파이썬 코드를 형식화하기 위해 피그먼트 ( 블로그 게시물 ) 도 사용 했습니다 .

— 사무엘
소스
나는 hilite.me 을 사용 했지만 지금은 dillinger.io를
— GoYun.Info
나는 또한 이것을 gist.github보다 선호합니다. 자바 스크립트 및 추가 스타일 / CSS가 필요하지 않습니다. 감사합니다.
— Prabowo Murti
40

이 CSS 스크립트는 모두에게 유용 할 수 있습니다-구문 강조는 아니지만 원본 코드를 원본 형식으로 표시하는 데 효과적입니다.

 <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; 
                color: #000000; background-color: #eee;
                font-size: 12px; border: 1px dashed #999999;
                line-height: 14px; padding: 5px; 
                overflow: auto; width: 100%">
       <code style="color:#000000;word-wrap:normal;">

            <<<<<<<YOUR CODE HERE>>>>>>>

       </code>
 </pre>

사용하는 방법 :

  1. 이 스 니펫을 텍스트 편집기에 붙여넣고
  2. <<<<<< >>>>>> 블록에 코드를 붙여 넣습니다.
  3. 모두 복사
  4. 블로거 (또는 다른) 포스트 편집기에서 HTML보기로 붙여 넣기

장점 : 간단하고 사용하기 쉽고 구성이 적으며 재구성이 쉽고 추가 소프트웨어가 필요하지 않습니다.

— gtiwari333
소스
1
내 의견으로는 가장 간단하고 깔끔한 답변입니다. 내부 CSS를 작성하기 만하면됩니다.
— Rishik Mani
나를 위해 잘 작동합니다. 간단한 해결책
— 5
15

SyntaxHighlighter를 사용하면 상당히 쉽게 수행 할 수 있습니다. 나는이 블로거에 SyntaxHighlighter를 설정하기위한 단계별 지침 내 블로그에 있습니다. SyntaxHighlighter는 사용하기 매우 쉽습니다. 스 니펫을 원시 형식으로 게시 한 후 다음 pre과 같이 블록으로 묶을 수 있습니다 .

<pre name="code" class="brush: erlang"><![CDATA[
-module(trim).

-export([string_strip_right/1, reverse_tl_reverse/1, bench/0]).

bench() -> [nbench(N) || N <- [1,1000,1000000]].

nbench(N) -> {N, bench(["a" || _ <- lists:seq(1,N)])}.

bench(String) ->
    {{string_strip_right,
    lists:sum([
        element(1, timer:tc(trim, string_strip_right, [String]))
        || _ <- lists:seq(1,1000)])},
    {reverse_tl_reverse,
    lists:sum([
        element(1, timer:tc(trim, reverse_tl_reverse, [String]))
        || _ <- lists:seq(1,1000)])}}.

string_strip_right(String) -> string:strip(String, right, $\n).

reverse_tl_reverse(String) ->
    lists:reverse(tl(lists:reverse(String))).
]]></pre>

브러시 이름을 "python"또는 "java"또는 "javascript"로 변경하고 원하는 코드를 붙여 넣으십시오. CDATA 태그를 사용하면 엔터티 이스케이프 또는 코드 블로깅의 다른 일반적인 성가심에 대해 걱정할 필요없이 거의 모든 코드를 넣을 수 있습니다.

— 알랭 오데아
소스
1
당신의 지시는 다른 주요 답변보다 나에게 더 효과적이었습니다. 경우에는 사람이 그들을 찾고 스스로 찾아 여기에 번들로 브러시와 자신의 별칭의 목록입니다.
— Scott
13

1. 먼저 블로거 템플릿을 백업합니다
. 2. 그런 다음 블로거 템플릿 을 열고 (HTML 편집 모드에서) 이 링크에 제공된 모든 CSS 를 </b:skin>태그 앞에 복사합니다.
3.</head> 태그 앞에 followig 코드를 붙여 넣습니다.

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4.</body> 태그 앞에 다음 코드를 붙여 넣습니다 .

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

5. Blogger 템플릿을 저장하십시오.
6. 이제 구문 강조를 사용할 수 있습니다 <pre></pre>. 태그 와 함께 사용할 수 있습니다 .

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

7. 여기서 코드를 탈출 할 수 있습니다 .
8. 다음 은 <class>속성 에 지원되는 언어 목록입니다 .

— 마헤시 메니 야
소스
좋은 링크. 컬러로 포맷하면 더 좋을 것입니다! +1
— Gaʀʀʏ
@le_garry : 코드 스 니펫을 포맷하는 동안 문제가 발생하여 색상이 아닙니다.
— Mahesh Meniya
gissolved의 답변을 참조하십시오. 내가 지금까지 본 최고의 형광펜은 색상입니다.
— Gaʀʀʏ
@le_garry Blogger에서 구문을 강조 표시하는 데 사용하고 있습니다. 색상과 잘 작동합니다. 나는 당신이 내 대답에 대해 알고 있다고 오해합니다. 그래서, 나는 어떤 문제에 직면해서 슬 that습니다 ..
— 마헤 Meniya에게
@MaheshMeniya 나는 구문 syntaxhighlighter에 대해 작성한 모든 단계를 수행했지만 작동하지 않습니다.
— AA.SC
9

http://formatmysourcecode.blogspot.co.uk/ 는 잘 작동합니다. 복사, 포맷, 붙여 넣기 만하면됩니다.

— Gob00st
소스
나는 이것을 내 블로그에 사용한다. 색상을 좋아하는 사람들에게는 색상 코드가 아닙니다! 나는 그것을 평범하고 단순하게 좋아합니다.
— Aravind
5

나는 상당히 낮은 기술 솔루션을 사용합니다. 이 온라인 구문 강조 도구를 사용하여 코드를 포맷 한 다음 블로그에 붙여 넣습니다.

— 필 헤일
소스
예-Tohtml은 코드를 붙여 넣기 위해 TechNet Wiki에서 권장하는 솔루션입니다!
— rbrayb
@Phil Hale 해당 도구에는 들여 쓰기가 없습니다
— user2771655
이것은 내가 지금까지 찾은 최고의 솔루션입니다. 감사합니다
— Kinjal
5

다음 은 코드를 형식화하고 HTML을 추출하는 사이트 이며 구문 색상 표시를위한 인라인 스타일도 포함합니다. 작동하지 않을 수 있습니다 모든 요구 사항의,하지만 좋은 시작이다. 나는 당신이 그것을 확장하고 싶다면 소스를 사용할 수 있다고 생각합니다.

— 풍부한
소스
더 이상 작동하지 않습니다.
— Ε Г И І И О
4

작업을 수행하는 도구를 만들었습니다. 내 블로그에서 찾을 수 있습니다.

무료 온라인 C # 코드 컬러 라이저

C # 코드를 채색하는 것 외에도이 도구는 모든 '<'및 '>'기호를 처리하여 '& lt;' 및 '& gt;'. 다른 브라우저에서 동일하게 보이도록 탭이 공백으로 변환됩니다. 블로그 나 웹 사이트에 CSS 스타일 시트를 삽입 할 수 없거나 삽입하지 않으려는 경우 CSS 스타일에 인라인을 만들 수도 있습니다.

— 파벨 블라 도프
소스
3

Blogger 기반 블로그에서 SyntaxHighlighter 를 사용 합니다. 실제 사이트는 Blogger가 아닌 내 서버에서 호스팅되지만 (Blogger는 자신의 사이트에 게시물을 올리는 옵션이 있음) 자신의 도메인 및 웹 호스팅 비용은 한 달에 몇 달러입니다.

— 피트 커캄
소스
동의 함-내 블로그를 호스팅하는 경우 여러 가지 옵션이 있지만 실제로 블로그가 Blogger에 의해 호스팅 될 때는 많은 지원이없는 것 같습니다.
— rbrayb
2

실제로 나는 이것을 위해 (무엇이 ;-)) Vim을 사용했다 : 그것은 2html "plugin"을 가지고있다. 여기에서 문서를 참조 하십시오 .

코드를 편집 할 때 코드를 HTML로 변환하고 결과를 Blogger의 HTML 편집기에 붙여 넣기 만하면됩니다.

참고 : HTML이 너무 아름답지는 않지만 (포함 된 CSS가 더 좋을 것입니다) 작동합니다.

Oh : 여러 언어에 대한 구문 파일이있어 매우 유용합니다.

— 졸트 보티 카이
소스
1

이맥스 특정 답변 : 블로거에 관한 한 인라인 CSS를 허용합니다. 자바 스크립트 기반 형광펜의 문제점은 색 구성표와 함께 살거나 직접 구현해야한다는 것입니다. 그러나 나처럼 이맥스 색 구성표의 팬이라면 훨씬 더 나은 옵션을 사용할 수 있습니다. emacs가 "htmlize.el"패키지를 해킹하여 다음 4 가지 기능을 추가했습니다.

  1. 블로그 -htmlize- 버퍼
  2. blog-htmlize-region
  3. 블로그 -htmlize-buffer-with-linum
  4. 블로그 -htmlize-region-with-linum

이 함수는 emacs의 새 버퍼에 복사하여 붙여 넣기 준비된 HTML (인라인 스타일)을 출력하므로 블로그 게시물에서 직접 사용할 수 있습니다. 출력은 색상 체계를 포함하여 emacs에서 코드를 보는 것과 똑같이 보입니다.

다음은 내 블로그 링크 이며 emacs와 함께 "blog-htmlize.el"을 사용하는 방법에 대한 자세한 정보를 찾을 수 있습니다. 이것은 "보다 작음"및 "보다 큼"부호도 html 인코딩으로 제거합니다. emacs는 모든 강조 표시 및 스타일링을 수행하므로 js 라이브러리가 스 니펫의 언어를 지원하는지 여부를 걱정할 필요가 없으며 블로거에서 템플릿 코드를 방해하지 않아도됩니다.

elisp 파일을 여기에서 찾을 수 있습니다 (파일을 blog-htmlize.el 로 저장 )

— 수예 트
소스
0

나는 F #으로 내 자신을 굴 렀지 만 ( 이 질문을 참조하십시오 ) 여전히 완벽하지 않습니다 (정규 표현식 만 수행하므로 클래스 또는 메소드 이름 등을 인식하지 못합니다).

기본적으로 내가 말할 수있는 것에서 작성과 HTML 모드 사이를 전환하면 블로거 편집기가 때로는 꺾쇠 괄호를 먹습니다. 따라서 HTML 모드로 붙여 넣은 다음 직접 저장해야합니다. (이 문제가있을 수 있습니다. 지금 시도했지만 브라우저에 따라 작동합니까?)

제네릭이 있으면 끔찍합니다!

— 벤졸
소스
0

html, javascript, c # 및 java를 게시하려면 특수 문자를 HTML 코드로 변환해야합니다. 로 '<'같은 &lt;과 '>'에 &gt; 등

이 링크 코드 변환기 를 iGoogle에 추가하십시오 . 특수 문자를 변환하는 데 도움이됩니다.

그런 다음 SyntaxHighlighter 3.0.83 새 버전을 추가 하여 블로거에서 코드를 사용자 정의하십시오. 그러나 블로거 템플릿에서 syntaxHighlighter를 구성하는 방법을 알아야합니다.

— Mdhar9e
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.