developer tip

블로거 / 블로그 스팟에서 prettify를 사용하는 방법?

optionbox 2020. 12. 29. 07:00
반응형

블로거 / 블로그 스팟에서 prettify를 사용하는 방법?

저는 blogger.com을 사용하여 프로그래밍에 대한 텍스트를 호스팅하고 있으며 코드 샘플을 멋지게 색칠하기 위해 prettify (stackoverflow와 동일)를 사용하고 싶습니다.

블로그 도메인에 prettify 스크립트를 어떻게 설치합니까?
어딘가에 공유 사본에 링크하는 것이 (실제로 가능하다면) 더 좋을까요?
다른 도메인에 웹 공간이 있습니다. 도움이 될까요?

감사합니다.

블로거에서 새 항목을 만들 때 항목에 HTML을 사용하고 블로그 항목을 편집 할 수있는 옵션이 제공됩니다.

http://blogger.com을 입력 한 다음 로그인 한 다음 게시> 게시물 편집> 편집을 입력 한 다음 맨 위에 넣으십시오.

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
    prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
</style>

이벤트 핸들러로 prettyPrint 직접 사용해서는 안되며 혼동을줍니다 (자세한 내용 은 readme 참조). 그래서 우리는 addLoadEvent돌아 서서를 호출하는 함수를 전달 합니다 prettyPrint.

이 경우 블로거가 스타일 시트에 대한 링크를 허용하지 않기 때문에 prettify.css 콘텐츠 만 포함합니다.

그런 다음 클래스 이름이 인 <code></code>태그 또는 태그 를 추가하면 다음 과 같이 언어를 지정할 수도 있습니다.<pre></pre>"prettyprint""prettyprint lang-html"

이렇게 보일 수 있습니다

<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>

또는 이렇게

<code class="prettyprint lang-html">
<!-- your code here-->
</code>

입력 한 코드는 <및>에서 HTML을 정리해야합니다. 여기에 코드를 붙여 넣으십시오. http://www.simplebits.com/cgi-bin/simplecode.pl

원하는 경우 기본적으로 모든 페이지에 포함되도록 HTML 레이아웃에 최상위 코드를 넣을 수 있습니다.

업데이트 이제 블로거에서 CSS 파일을 링크 할 수 있으므로에 추가하면 <head>충분합니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>

의도적으로 body onload 이벤트를 대체하지 않기로 선택했습니다. 대신 이전 브라우저가 지원하지 않는 새 DOMContentLoaded 이벤트를 사용하고 있습니다. 이전 브라우저 지원이 필요한 경우 다른로드 이벤트를 사용하여 prettyPrint를 시작할 수 있습니다. 예를 들어 jQuery :

jQuery(function($){
    prettyPrint();
});

또는 가정으로 작은 domready 적

그리고 완료 :)

편집하다:

로 임 H는 : 코멘트에 지적, 경우에 당신은 당신이 방법은 바인드 사용자 정의 자바 스크립트로 여기에 설명 사용해야하는 블로거 동적 뷰 (아약스 템플릿)를 사용하는 경우 페이지로드에서 호출되지 않습니다 prettyPrint을 ()

2017-06-04 업데이트

여기에서 가이드를 사용하세요. https://github.com/google/code-prettify

기본적으로 이것을 사용하십시오 :)

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...</code></pre>

다음은 즉시 나를 위해 일했습니다.

  • Blogger> 레이아웃> HTML 수정으로 이동합니다.
  • 다음 스 니펫을 복사하여 <head>'템플릿 수정'입력란 바로 뒤에 붙여 넣으세요 .

단편:

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>
  • 후 </head>교체 <body>와 함께<body onload='prettyPrint()'>
  • "SAVE TEMPLATE"를 클릭합니다.
  • Blogger> 게시> 새 게시물로 이동합니다.
  • "HTML 편집"을 클릭하여 HTML을 편집하고 있는지 확인하십시오. 빈 필드에서 다음을 시도하십시오.

<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>

  • 이제 "미리보기"를 클릭하면이 코드가 검은 색으로 만 표시됩니다. (아직) 걱정하지 마세요.
  • "게시물 게시"를 클릭 한 다음 "블로그보기"를 클릭하십시오. 코드는 미리 정해져 야합니다.

요즘 Google-Code-Prettify에는 자동 로더 스크립트가 있습니다. 하나의 URL을 통해 prettify 용 JavaScript 및 CSS를로드 할 수 있습니다.

<head>Blogger 템플릿 섹션에 스크립트를 추가하면 모든 게시물에서 작동합니다.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

자세한 내용은 http://code.google.com/p/google-code-prettify/wiki/GettingStarted를 참조하세요.

블로거에 Google 코드 예식자를 추가하는 것은 매우 간단합니다.

블로거에서 태그 바로 앞에 아래 자바 스크립트 라이브러리를 포함하면됩니다.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

아래 사진처럼 ...

여기에 이미지 설명 입력

이제 블로거에 Google 코드 사전 지정자를 성공적으로 추가했습니다.

이제 블로거 게시물에 코드를 삽입하려면 코드 (html, css, php 등)를 추가 한 다음 .... 태그 사이에 해당 코드를 삽입하십시오.

 <pre class="prettyprint">...</pre>

또는

<code class="prettyprint">...</code>

Blogger의 Google Prettify 데모

또한 다음 링크에서 블로거에이 Google 프리티 파이어를 추가하려면이 문서를 참조하십시오.

Google Prettify를 사용하여 Blogger에 구문 하이 라이터를 추가하는 방법

Have a look at SyntaxHightlighter at http://alexgorbatchev.com/wiki/SyntaxHighlighter On that site you can also find instructions on how to use it at blogger.com and the site offers a hosted version of the required scripts so you don't need to host files somewhere yourself.

Another solution is to use the syntaxhighlighter 2.0 java script library. I've used it on my blog and it seems to work quite well.

Here's a post about it:

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

Cheers.

Not a direct answer to your question, but worth consider GitHub. You can get a free account and get syntax colored "gists" which you can share and host on your web page.

The downside is that the copy is hosted on Github's site and if that's down, then it's down for you too.

cdnjs providing the library "SyntaxHighlighter"

got to blogger >> template >> edit template add below code just before ending of the body tag and save template.
I have given Example for python.
you can link the other language script files from cdnjs. syntax highlight code

<pre class="brush: py">
    print("hello world")
</pre>

for other languages go and copy script: https://cdnjs.com/libraries/SyntaxHighlighter

여기에 이미지 설명 입력

<!-- syntax highlighter-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js'/>
<!-- for python -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/>
<!-- include other languages like javascript, php -->
<script language='javascript'> 
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all(); 
</script>

Here is the solution that works for me. Put in the <head>...</head> of dynamic blogger HTML:

<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
    prettyPrint();
});
</script>

Go to blogger theme section and click on edit HTML.. Then add the Google Prettify CDN to the head tag of the HTML.

https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

Then include a theme for code snippet below this script..I included Desert theme.

<!--Desert theme-->
<style type='text/css'>pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

For more themes, visit here.. Prettify themes

When you create a post, change the edit mode from visual to HTML and go to the place where you are going to add the code snippet. Then include the code like this.

<pre class="prettyprint">
  <code class="language-html">
      <!-- your code snippet -->
  </code>
</pre>

You can change the code style by selecting relevant languages html, css, php, javascript... Here I used a html code snippet.

ReferenceURL : https://stackoverflow.com/questions/1852537/how-to-use-prettify-with-blogger-blogspot

반응형

'developer tip' 카테고리의 다른 글

Java 용 정적 분석 도구 권장 사항?  (0) 2020.12.29
Windows 콘솔이 나타나지 않고 Python 스크립트 실행  (0) 2020.12.29
배열에서 일치하거나 가장 가까운 값 찾기  (0) 2020.12.29
NodeJS / Express에서“module.exports”와“exports.methods”는 무엇을 의미합니까?  (0) 2020.12.29
MySQL Workbench :“ON UPDATE”및 CURRENT_TIMESTAMP를 어떻게 설정합니까?  (0) 2020.12.29

'developer tip'의 다른글

  • 현재글블로거 / 블로그 스팟에서 prettify를 사용하는 방법?

관련글

댓글

티스토리툴바