Node.js에서 index.html 파일 읽어서 code 태그에index.html파일 뿌리고 highlightjs 적용시키기

개인 프로젝트 사이트에 소스코드를 보여주어야 할 부분이 생겨서 적용했습니다.

 

index.html파일과 style.css, script.js파일을 각각 fs.readFile로 읽어들이고 파일 내용을 string 변수에 담습니다.

그리고 string을 그대로 pug로 가져가서 뿌려줍니다.  뿌려질 때 코드가 줄바꿈이 되지 않고 일직선으로 보이기 떄문에 hightlight를 적용시켰습니다. 

 

highlightjs.org/  

highlight.js

 

 

먼저, 라우트 파일 js

router.get('/', function(req, res, next) {
  const paramPath = req.query.fileType;
  console.log("paramPath : %s", paramPath);

  if(paramPath == "html"){
    fs.readFile('./public/typeA/index.html', (err, data) => {
      if(err) throw err;

      //console.log('---------index.html---------');
      const string = data.toString();
      //console.log(string);
      res.render('exampleAtype', {title:"example A type", paramPath:paramPath, string:string } );
    }); // END fs.readFile

  } else if (paramPath == "css") {
    fs.readFile('./public/typeA/style.css', (err, data) => {
      if(err) throw err;

      const string = data.toString();
      res.render('exampleAtype', {title:"example A type", paramPath:paramPath, string:string } );
    }); // END fs.readFile

  } else {
    fs.readFile('./public/typeA/script.js', (err, data) => {
      if(err) throw err;

      const string = data.toString();
      res.render('exampleAtype', {title:"example A type", paramPath:paramPath, string:string } );
    }); // END fs.readFile
  }



}); // END router.get

 

 

pug 레이아웃 파일 상단에

doctype html
html(lang='ko')
  head
    title= title
    meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
    meta(name="description" content="웹디자인기능사 실기 기출문제 사이트")
    meta(name="author" content="Tutor Emily kim")
    meta(name="theme-color" content="#f7b359")
    script(src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js")
    script hljs.initHighlightingOnLoad(); 
    script(src="/js/script.js")
    link(rel="stylesheet", href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/atom-one-dark.min.css")
    link(rel="stylesheet", href="/css/bootstrap/bootstrap.min.css")
    link(rel="stylesheet", href="/css/bootstrap/grid.min.css")
    link(rel="stylesheet", href="/css/bootstrap/album.css")
    link(rel="stylesheet", href="/css/style.css")
    
  body
    include ./header.pug
    block content
      
      

 

 

레이아웃 pug 파일의 핵심은 이 부분을 불러오는 것임.

script(src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js")
script hljs.initHighlightingOnLoad(); 
link(rel="stylesheet", href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/atom-one-dark.min.css")
    

 

보여지는 pug 파일

extends layout

block content
  .container-fluid
    .row.flex-xl-nowrap
      .col-md-3.col-xl-2.bd-sidebar
        nav.collapse.bd-links(id="bd-docs-nav" aria-label="Main navigation")
        div(class="bd-toc-item active")
          a(class="bd-toc-link" href="/exampleAtype") A유형 소개
          ul(class="nav bd-sidenav" )
            li(class="active bd-sidenav-active")
              a(href="/exampleAtype?fileType=html") HTML
            li
              a(href="/exampleAtype?fileType=css") CSS
            li
              a(href="/exampleAtype?fileType=javascript") javascript & jQuery
    
      main.col-md-9.col-xl-8.py-md-3.pl-md-5.bd-content(role="main")
        h1(class="bd-title" id="content") Overview
        - const urlurl = "http://engineerinformation.com/";
        h1(class="bd-title" id="content") #{paramPath} 
        -//iframe(width='1200', height='1080', src=urlurl)
        figure(role="HTML5 code" aria-labelledby=`"${paramPath}-caption"`)
          figcaption(id=`"${paramPath}-caption"`) #{paramPath} file
          pre(class=`${paramPath}`)
            code= string

pug파일에서 쿼리스트링으로 html,css,javascript 부분이 각각 던져지면, 라우터에서 req.query.fileType으로 받아서 처리하는 것입니다.