Сделайте так, чтобы тег <pre>выглядел правильно с отступом с помощью jQuery / JavaScript

Question

У меня есть тег <pre> & <code>, который выглядит следующим образом:

<pre><code>somevar = array.join("-")
      somevar.split("-")
      puts "#{somevar} is cool yay!"
      if somevar.nil?
          puts 'it's nil!'
      end
      

Как я могу сделать так, чтобы это выглядело правильно с отступом? Это на самом деле выглядит так:

и должно выглядеть так:

Я попытался использовать функцию «trim ()» и «replace ()» в jQuery с этим RegEx:

• /^\s*/
• /\s*$/
• /^\s+|\s+$/gi

Но ни за что. Как я должен это делать? Спасибо!

Answer 1

Тег <pre> будет интерпретировать его содержимое буквально - поэтому вам нужно добавить несколько пробелов.

<pre><code>somevar = array.join("-")
      somevar.split("-")
      puts "#{somevar} is cool yay!"
      if somevar.nil?
          puts 'it's nil!'
      end
      

должно стать

<pre><code>      somevar = array.join("-")
      somevar.split("-")
      puts "#{somevar} is cool yay!"
      if somevar.nil?
          puts 'it's nil!'
      end
      

Answer 2

Убедитесь, что у кода в HTML нет предшествующего пробела на новых строках - pre не свернет несколько пробелов.