5 분 동안 Markdown 문서 해상도 기 를 만 듭 니 다.

글자 수: 790
읽 기 시간: 5 분
머리말
『 8195 』 본 고 는 0 부터 Markdown 문서 전시 도 구 를 구축 하 는 방법 을 설명 하 는 데 목적 을 둔다.전체 과정 이 매우 간단 합 니 다. 우 리 는 5 분 이면 맞 춤 형 MD 문서 해석 기 를 만 들 수 있 습 니 다. 매우 멋 지지 않 습 니까?
『 8195 』 우선 성과 도 를 한 장 그 려 서 효 과 를 봅 시다.
본문
1. 환경 준비
① 표 시 된 플러그 인
가장 인기 있 는 markdown 파일 분석 플러그 인 입 니 다.플러그 인 주소:https://github.com/chjj/marked
② 하 이 라이트 플러그 인
* 8195: 8195: 다양한 언어 를 표시 하 는 전단 플러그 인 을 포맷 하여 문서 의 코드 부분 을 표시 합 니 다.플러그 인 주소:http://highlightjs.readthedoc...
③ JQuery 플러그 인
④ ZUI 플러그 인
    이것 은 boottstrap 패 키 징 을 바탕 으로 하 는 GUI 프레임 워 크 입 니 다. 이것 은 필자 가 자주 사용 하 는 프레임 워 크 로 마음대로 선택 합 니 다.여기 서 우 리 는 단지 그것 의 스타일 을 사 용 했 을 뿐, 선택 할 수 있 습 니 다. 여러분 은 자신 이 좋아 하 는 GUI 프레임 워 크 를 선택 하여 보 여줄 수 있 습 니 다.플러그 인 주소:http://zui.sexy/#javascript/m...
2. 공구 구축
    환경 준비 완료, 그럼 건설 을 시작 합 시다!
* 8195 ° 8195 ° 먼저 index. html 파일 을 만 들 고 코드 는 다음 과 같 습 니 다.

    페이지 는 방금 준비 한 자원 JQuery, marked, highlight 와 zui 를 도입 합 니 다.여기 하 이 라이트 플러그 인 은 선택 할 수 있 는 스타일 파일 이 많 습 니 다. styles 폴 더 아래 좋아 하 는 스타일 을 마음대로 선택 할 수 있 습 니 다.
* 8195: 8195: 그리고 test. js 파일 을 만 듭 니 다. 코드 는 다음 과 같 습 니 다.

$(function(){
    //marked       
    marked.setOptions({
        renderer: new marked.Renderer(),
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code,lang) {
            //   highlight            
            return hljs.highlightAuto(code,[lang]).value;
        }
    });

    $.ajax({
        type:"get",
        url : "     .md",
        async : false,
        dataType:"text",
        success : function(response,status,request) {
            document.body.innerHTML = marked(response);

            //         
            hljs.initHighlighting();

            //             
            $("table").addClass("table");
        }
    });
});

코드 설명 과 같이 여 기 는 marked 와 highlight 플러그 인의 기본 적 인 용법 만 사 용 했 습 니 다. 상세 한 용법 은 환경 준비 중인 플러그 인 주소 에서 문 서 를 참조 하 십시오.
마지막 으로 스타일 파일 test. css 를 만 듭 니 다. 코드 는 다음 과 같 습 니 다.

body{
  padding: 50px;
}

예 를 들 어 간단 한 양식 만 썼 을 뿐이다.md 문서 의 디 스 플레이 방식 을 스타일 로 제어 할 수 있 습 니 다.
이로써 전체 도구 가 구축 되 었 고 페이지 를 실행 하면 효 과 를 볼 수 있 습 니 다.이것 은 완전히 우리 만 의 md 분석 도구 입 니 다. 우 리 는 자신의 취향 에 따라 문 서 를 마음대로 수정 할 수 있 는 전시 방식 입 니 다. 멋 있 죠?
    모두 가 나의 위 챗 공중 번 호 를 주목 하고 오래된 기사 와 함께 코드 를 훑 는 것 을 환영 합 니 다.