신텍스 하이라이터 SyntaxHighter?????

신텍스 하이라이터[SyntaxHighter] 설치법을 알아보겠습니다.

신텍스 하이라이터란 아래처럼 블로그 포스팅 안에 HTML 소스를 보여지게 하는 기능입니다.

참 유용한 기능이죠.

  


     
        
        MARANATHA
    
    
        
        

welcome to maranatha home

MARANATHA

즐겨찾는 페이지

감사합니다

물론 다른 방법도 있습니다.

아래처럼 순수하게 TEXT로만 보여지게 하면 간단하죠.

무선을 선택하든 맘에 드는 걸로 알아서 하면 됩니다.

<!DOCTYPE html>

<html>

    <head> 

        <meta charset="utf-8">

        <title>MARANATHA</title>

    </head>

    <body>

        <!--본문 시작-->

        <h1>welcome to maranatha home</h1>

        <a href="https://t1.daumcdn.net/cfile/tistory/990A563C5B7A3DF801">MARANATHA</a>

        <br>

        <br>

        <a href="attribute.html">즐겨찾는 페이지</a>

        <br>

        <br>

        <img src="https://t1.daumcdn.net/cfile/tistory/990A563C5B7A3DF801" alt="감사합니다" title="인물사진"width="600" height="400">

        </body>

</html> 


신텍스 하이라이터 SyntaxHighter 다운로드 방법

syntaxhighlighter_3.0.83.zip

위의 압축 파일을 다운 로드 받아서 압축을 풀어줍니다.

복잡하거나 html을 잘 모르는 분이라면 위의 파일을 다운로드 받아서 압축을 풀어주면 됩니다.

아니면 아래의 사이트로 가서 다운로드를 받아도 됩니다.

문제는 영어라는거..ㅎㅎ;;;;

http://alexgorbatchev.com/SyntaxHighlighter/

다운로드를 받아서 압축을 풀면 아래와 같은 폴더가 만들어집니다.

syntaxhighlighter_3.0.83의 압축파일을 풀면 아래와 같은 파일들이 들어 있습니다.

이제는 이 파일들을 티스토리에 적용을 시켜보겠습니다.


신텍스 하이라이터 SyntaxHighter 티스토리[Tistory]에 설치하기

티스토리 화면에서 블로그 관리자 화면으로 들어갑니다.

기본 설정에서 단축키 [Q]를 눌러도 블로그 관리자 화면으로 들어갑니다.

관리자 화면에서 [1]의 스킨 변경으로 들어가서 

[2]번의 스킨 다운로드를 클릭해서 현재의 스킨을 다운로드 받아서 따로 저장하면 좋습니다.

지금부터 스킨의 html과 css를 수정할 텐데 수정을 잘 못하면 되돌릴수 없는 요단강을 건너는 수가 있기때문에 안된다 싶으면 원본 파일로 다시 설치 해보리면 됩니다.

물론 이 방법 외에도 다른 방법이 있으니까 잘 찾아보기시 바랍니다.

[3]번 스킨 편집을 클릭합니다.

[3]번을 클릭하면 화면이 분할 되면서 우측에 스킨 편집 화면이 나옵니다.

[html 편집] 버튼을 클릭합니다. 




'IT > 티스토리 꾸미기' 카테고리의 다른 글

html에 사용하는 GIF이미지들  (0) 2018.08.20
티스토리 글서식  (0) 2018.08.20
티스토리 애드센스 광고 삽입하기  (0) 2018.07.20
티스토리 사이트맵  (0) 2018.07.13
<!DOCTYPE html>
<!--html5언어로 작성 선언문 웹브라우저 크롬,익스플로러 등 인식-->
<html>
    <!--html 문서 시작-->
    <head> 
    <!--헤드 영역 시작-->
        <meta charset="utf-8">
         <!--문자를 유니코드 문자 사용(한국어,중국어,일본어)-->
        <title>MARANATHA</title>
         <!--즐겨찾기,검색엔진 검색 중요한 의미있는 단어-->
    </head>
    <!--헤드 영역 마침-->


    <body>
    <!--본문 시작-->
         <h1>welcome to maranatha home</h1>
           <!--제목 글자 h1가장큰글자-->
   
         <a href="sample.html">MARANATHA</a>
         <br>
         <br>

           <!--하이퍼링크 : 페이지연결--> 
         <a href="attribute.html">즐겨찾는 페이지</a>
           <!--하이퍼링크 : 페이지연결-->
          <img src="photo.jpg" alt="인물사진" title="인물사진"width="500" height="400">
            <!--이미지 태그 단독으로 사용 종료/ 태그 없음-->
            < !--img src="경로" alt="시각 장애인접근성, 필수 이미지가 안보일때 글자로 표시"  title="마우스올렸을때 설명글"-->
    </body>
     <!--본문 마침-->
</html> 
<!--html 문서 마침-->




     
        
        MARANATHA
    
    
        
        

welcome to maranatha home

MARANATHA

즐겨찾는 페이지

감사합니다
[&무료이미지 제공 싸이트]

https://pixabay.com/ko/

https://unsplash.com/

http://www.freeqration.com/featured/

https://www.sitebuilderreport.com/stock-up

http://www.allowto.com/

https://www.vecteezy.com/

[무료아이콘 제공 싸이트]

https://www.flaticon.com/

[무료 글꼴 제공 싸이트]

http://hangeul.naver.com/

https://www.dafont.com/

https://www.fontsquirrel.com/

'IT' 카테고리의 다른 글

HTML  (0) 2018.08.30
워드프레스 사이트맵  (0) 2018.08.21
무료 호스팅의 최강자 깃허브 Git Hub!!!  (0) 2018.08.07

+ Recent posts