javascript - Highlight.js と Showdown.js が連携しない

Question

プレビューが有効になっているときに、highlight.jsを使用できるようにしようとしています。

showdown.js を使用して、ハイライト js をプレビューで動作させることができません

質問: Highlight.js を showdown.js と連携させる方法

Codepen Demo すべての .js ファイルと css ファイルが codepen 設定に読み込まれていることに注意してください

使ってみました

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

$("#message").on('keyup paste cut', function() {
  var text = document.getElementById('message').value,
  target = document.getElementById('showdown'),
  converter = new showdown.Converter({
  parseImgDimensions: true
}),
html = converter.makeHtml(text);

target.innerHTML = html;
});

完全なスクリプト

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
})

$('#button-link').on('click', function() {
  $('#myLink').modal('show');
});

$('#button-image').on('click', function() {
  $('#myImage').modal('show');
});

$('#button-smile').on('click', function() {
  $('#mySmile').modal('show');
});

$('#myLink').on('shown.bs.modal', function() {
  var textarea = document.getElementById("message");
  var len = textarea.value.length;
  var start = textarea.selectionStart;
  var end = textarea.selectionEnd;
  var selectedText = textarea.value.substring(start, end);
  $('#link_title').val(selectedText);
  $('#link_url').val('http://');
});

$('#myImage').on('shown.bs.modal', function() {
  $("#image_url").attr("placeholder", "http://www.example.com/image.png");
});

$("#save-image").on('click', function(e) {
  var textarea = document.getElementById("message");
  var len = textarea.value.length;
  var start = textarea.selectionStart;
  var end = textarea.selectionEnd;
  var selectedText = textarea.value.substring(start, end);
  var counter = findAvailableNumber(textarea);

  var replace_word = '![enter image description here]' + '[' + counter + ']';

  if (counter == 1) {

    if ($('input#image_width').val().length > 0) {
      var add_link = '\n\n' + '   [' + counter + ']: ' + $('#image_url').val() + ' =' + $('input#image_width').val() + 'x' + $('input#image_height').val();
    } else {
      var add_link = '\n\n' + '   [' + counter + ']: ' + $('#image_url').val();
    }

  } else {
    var add_link = '\n' + '   [' + counter + ']: ' + $('#image_url').val();
  }

  textarea.value = textarea.value.substring(0, start) + replace_word + textarea.value.substring(end, len) + add_link;
  $("#message").trigger('change');
});

$("#save-link").on('click', function(e) {
  var textarea = document.getElementById("message");
  var len = textarea.value.length;
  var start = textarea.selectionStart;
  var end = textarea.selectionEnd;
  var selectedText = textarea.value.substring(start, end);
  var counter = findAvailableNumber(textarea);

  if ($('#link_title').val().length > 0) {
    var replace_word = '[' + $('#link_title').val() + ']' + '[' + counter + ']';
  } else {
    var replace_word = '[enter link description here]' + '[' + counter + ']';
  }

  if (counter == 1) {
    var add_link = '\n\n' + '   [' + counter + ']: ' + $('#link_url').val();
  } else {
    var add_link = '\n' + '   [' + counter + ']: ' + $('#link_url').val();
  }

  textarea.value = textarea.value.substring(0, start) + replace_word + textarea.value.substring(end, len) + add_link;
  $("#message").trigger('change');
});

// Editor Buttons
$('#bold').on('click', function(e) {
  text_wrap("message", "**", "**", 'strong text');
});

$('#italic').on('click', function(e) {
  text_wrap("message", "*", "*", 'emphasized text');
});
$('#quote').on('click', function(e) {
  text_wrap("message", "> ", "", 'Blockquote');
});

$('#code').on('click', function(e) {
  code_wrap("message", "", "", 'enter code here');
});

function text_wrap(elementID, openTag, closeTag, message) {
  var textArea = $('#' + elementID);
  var len = textArea.val().length;
  var start = textArea[0].selectionStart;
  var end = textArea[0].selectionEnd;
  var selectedText = textArea.val().substring(start, end);

  if (selectedText.length > 0) {

    replacement = openTag + selectedText + closeTag;

  } else {

    replacement = openTag + message + closeTag;
  }

  textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}

function code_wrap(elementID, openTag, closeTag, message) {
  var textArea = $('#' + elementID);
  var len = textArea.val().length;
  var start = textArea[0].selectionStart;
  var end = textArea[0].selectionEnd;
  var selectedText = textArea.val().substring(start, end);
  var multiLineReplace = '\n' + openTag;

  if (selectedText.length > 0) {

    //using regex to replace all instances of `\n` with `\n` + your indent spaces.
    replacement = '    ' + openTag + selectedText.replace(/\n/g, multiLineReplace) + closeTag;

  } else {

    replacement = '    ' + openTag + message + closeTag;
  }

  textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}

function findAvailableNumber(textarea) {
  var number = 1;

  var a = textarea.value;

  if (a.indexOf('[1]') > -1) {

    //Find lines with links

    var matches = a.match(/(^|\n)\s*\[\d+\]:/g);

    //Find corresponding numbers

    var usedNumbers = matches.map(function(match) {
      return parseInt(match.match(/\d+/)[0]);
    });

    //Find first unused number

    var number = 1;

    while (true) {

      if (usedNumbers.indexOf(number) === -1) {

        //Found unused number

        return number;
      }

      number++;
    }
  }

  return number;
}

$("#message").on('keyup paste cut', function() {
  var text = document.getElementById('message').value,
    target = document.getElementById('showdown'),
    converter = new showdown.Converter({
      parseImgDimensions: true
    }),
    html = converter.makeHtml(text);

  target.innerHTML = html;
});

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
});