json을 markdown으로 변환하고 gulp를 사용하여 jade에 삽입하십시오.

Question

현재 gulp를 사용하여 json 데이터를 jade에 삽입하는 방법을 알고 있지만 json 데이터의 markdown은 올바른 방법으로 형식화되지 않았습니다. 나는 marked에 대해 들어 왔지만 어떻게 내 꿀꺽 꿀꺽 파일이나 비취 파일에 그것을 사용할 수 있는지 모르겠습니다. src.replace 함수

되지 않습니다 :

나는 모두 형식 오류가 말을 내가

.pipe(data(marked(JSON.parse(fs.readFileSync(file))))) 

및

.pipe(marked(data(JSON.parse(fs.readFileSync(file))))) 

을 시도 직접

.pipe(data(JSON.parse(fs.readFileSync(file))) 
.pipe(pug()) 
.pipe(gulp.dest(destdir)) 

를 사용하여 배관 데이터입니다 나는 잘 모르겠다. w marked 여기 또는 제 옥 코드에 삽입 할 수 있습니다. 어떤 제안?

EDITED 그래서 나는 JSON.parse에서 얻은 json 객체의 일부 전처리를 수행했습니다. 제 옥 데이터에 주입하기 전에 먼저 각 json 객체의 문자열을 marked에 작성했습니다. 같은 뭔가 :

var marked = require("marked") 
function preprocess(){ 
    var data = JSON.parse(fs.readFileSync(file)); 
    iterate through data and do marked(string) 
    return data 
} 

는 지금은 옥으로 렌더링 된 문자열을 얻을 수,하지만 옥은 말 그대로 <p> </p> 나의 웹 페이지에 표시됩니다 예를 <p> </p>를 들어, 가격 인하 기호를 이해 할 수 없습니다. 해결 방법은 없습니까?

Answer 1

이전과 같은 워크 플로우를 직접 사용하지 않았으므로 한 가지 제안으로 문제를 직접 해결할 수는 없지만 조합을 적용하면 문제를 해결할 수있는 몇 가지 사항을 공유하려고합니다.

Markdown부터 시작하겠습니다. ()과 (gulp-markdown-to-json)을 함께 사용할 수 있습니다. 일반적인 워크 플로는 다음과 같습니다

const gulp = require('gulp'); 
const markdownToJSON = require('gulp-markdown-to-json'); 
const marked = require('marked'); 

marked.setOptions({ 
    pedantic: true, 
    smartypants: true 
}); 

gulp.task('markdown',() => { 
    gulp.src('./content/**/*.md') 
    .pipe(markdownToJSON(marked)) 
    .pipe(gulp.dest('.')) 
}); 

이것은 당신의 인하를 타고 또한 HTML로 가격 인하의 몸을 변환 JSON 형식으로 포장됩니다. 표시된 옵션을 보면 마크 다운을 약간 정리하는 데 사용할 수있는 방법이 있습니다. 서식에 문제가 있다고 말한 이후에 유용 할 수 있습니다.

이제 우리는 Jade로 파이프해야하는 JSON 파일이 있습니다. 데이터 (지역)를 사용하여 Jade 컴파일 태스크를 통해 파이프 할 수도 있습니다.

gulp.task('compilePug', function() { 
    return gulp.src('templates/**/*.pug') 
     .pipe(pug({ 
      pretty: true, 
      data: { 
       'posts' : JSON.parse(fs.readFileSync('content/json/content.json')) 
      } 
     })) 
     .on('error', onError) 
     .pipe(gulp.dest('./')); 
}); 

컴파일하면 게시물 옥에 변수 바로 아래에 귀하의 JSON에 액세스 할 수 있습니다.

마지막으로, 귀하는 Jade 템플리트에 단락 태그가 나타나 있다고 언급했습니다. 당신이 평범한 HTML을 Jade에게 보내려고하는 것처럼 들립니다. 첫 번째로 공유 한 꿀풀 워크 플로우를 사용한다면 사실, 당신은 HTML을 비취로 파이핑 할 것입니다. Jade에게 HTML이 올 것이라고 알릴 필요가 있습니다.

!{posts.HTMLfromJSON} // Jade will expect HTML 
#{posts.HTMLfromJson} // Jade won't expect HTML it will treat it like plain text 

이 중 하나를 선택하면 문제를 해결하는 데 도움이됩니다.