title: Markdown to HTML w/ syntax highlighting using Gulp
body: <p>I'm using the <a href="https://github.com/sindresorhus/gulp-markdown" rel="nofollow noreferrer">gulp-markdown</a> package to render a markdown file into an HTML partial. (It uses the npm <a href="https://www.npmjs.com/package/marked" rel="nofollow noreferrer">marked</a> package for the actual rendering.) Everything renders fine, except for my code blocks!! How do I get gulp to put out correctly formatted HTML?</p>
  
  <p>Here is my gulp:</p>
  
  <pre><code>var gulp      = require('gulp');
  var markdown  = require('gulp-markdown');
  markdown.marked.setOptions({
    renderer: new markdown.marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: true,
    smartLists: true,
    smartypants: false
  });
  
  // turn md files into html partials
  gulp.task('blogPosts', function () {
      return gulp.src('src/blog/blogOne.md')
          .pipe(markdown())
          .pipe(gulp.dest('src/partials'));
  });
  </code></pre>
  
  <p>And here is my markdown:</p>
  
  <pre><code>```JavaScript
  app.controller('DisplayController', ['$scope', 'ClogsService', function($scope, ClogsService){
    $scope.clogs = [];
    $scope.getClogs = function() {
      ClogService.getClogs()
        .then(function(response){
          ClogsService.clogs = response.data;
            $scope.clogs = ClogsService.clogs;
        });
      };
  })
  ```
  </code></pre>
  
  <p>Here is the output HTML: </p>
  
  <pre><code>&lt;pre&gt;&lt;code&gt;app.controller(&amp;#39;DisplayController&amp;#39;, [&amp;#39;$scope&amp;#39;, &amp;#39;ClogsService&amp;#39;, function($scope, ClogsService){
    $scope.clogs = [];
    $scope.getClogs = function() {
      ClogService.getClogs()
        .then(function(response){
          ClogsService.clogs = response.data;
            $scope.clogs = ClogsService.clogs;
        });
      };
  })
  &lt;/code&gt;&lt;/pre&gt;
  </code></pre>
  
  <p>My page renders like this: <a href="https://i.stack.imgur.com/0WHGV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0WHGV.png" alt="enter image description here"></a></p>
  
  <p>How do I get the page to render code blocks correctly with syntax highlighting?</p>