convert json to markdown and inject into jade using gulp - json

Question

Currently I know how to inject json data into jade using gulp, but the markdown in my json data are not formatted in the right way. I have heard of marked but not sure how I can use it in my gulp file or jade file.
I am piping data directly using
.pipe(data(JSON.parse(fs.readFileSync(file)))
.pipe(pug())
.pipe(gulp.dest(destdir))
I have tried
.pipe(data(marked(JSON.parse(fs.readFileSync(file)))))
and
.pipe(marked(data(JSON.parse(fs.readFileSync(file)))))
both say TypeError: src.replace is not a function
I am not sure how I can embed marked here or in my jade codes. Any suggestions?
EDITED
So I did some preprocessing of the json object that I got from JSON.parse. I wrote a function to marked the strings in each json object first before inject into my jade data. Something like:
var marked = require("marked")
function preprocess(){
var data = JSON.parse(fs.readFileSync(file));
iterate through data and do marked(string)
return data
}
Now I am able to get the rendered string into jade, but jade is not able to understand the markdown symbols, for example <p> </p> are literally shown in my webpage as <p> </p>. Any workaround?

Answer 1

Since I haven't directly used a workflow like yours before, I cannot directly solve your issue with a single suggestion but I will try to share couple of things that might fix your problem when applied in a combination.
Let's start with Markdown. You can use marked together with gulp-markdown-to-json. A common workflow looks like this:
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('.'))
});
This will take your markdown and wrap it in JSON format also converting the body of the markdown to HTML. If you look at the options of marked, there are methods available to clean up your markdown a bit. They might be useful since you've said there are problems with your formatting.
Now we have a JSON file that we need to pipe to Jade. You can also pipe via the Jade compile task using data(locals).
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('./'));
});
Once you compile, you will have access to your JSON under posts variable right in Jade.
And finally, you mentioned that paragraph tags are appearing in your Jade template. That sounds like you're trying to pipe plain HTML to Jade. Which is fine, in fact, you'll be piping HTML to Jade if you use the gulp workflow I shared in the beginning. You just need to tell Jade that HTML is coming:
!{posts.HTMLfromJSON} // Jade will expect HTML
#{posts.HTMLfromJson} // Jade won't expect HTML it will treat it like plain text
Hope any of these will help you fix the issue.