制作一个<pre> tag look correctly indented with jQuery/JavaScript</pre>

Question

我有<pre>＆amp; <code>标记，如下所示：

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

如何让它看起来像是正确缩进的？它实际上看起来像：

它应该看起来像：

我尝试了jQuery的'trim（）'函数和'replace（）'这个RegEx：

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

但没办法。我该怎么办？谢谢！

Answer 1

确保HTML中的代码在换行符上没有前面的空格 - pre不会折叠多个空格。

Answer 2

<pre>标记将按字面解释其内容 - 因此您需要添加一些空格。

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

应该成为

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