HTML breaks - Githubissues

Legends commented 9 years ago

The following code breaks using the html class. Just copy & paste the. It's using hl cdn scripts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/vs.min.css">
    <!-- https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/sunburst.min.css -->

     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/powershell.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/vbscript-html.min.js"></script>

    <script>hljs.initHighlightingOnLoad();</script>

</head>

<body style="background: white; font-family: Helvetica">

html
<pre><code class="html">
<![CDATA[
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>highlightjs - cdnjs.com - the missing cdn for javascript and css</title>
  <meta property="og:title" content="highlightjs - cdnjs.com - the missing cdn for javascript and css" />
  <meta property="og:image" content="/img/logotext.png" />
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="Easy-to-use, Javascript-based syntax highlighter">
  <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="cdnjs">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.2/css/toastr.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.1.1-1/css/united/bootstrap.min.css">
  <link rel="stylesheet" href="/css/theme.css">
</head>
]]>
<body>
  <div class="container">
</code></pre>

powershell
<pre><code class="powershell">

Get-ChildItem 'HKLM:\SOFTWARE\Microsoft\NET Framework Setup\NDP' -recurse |
Get-ItemProperty -name Version -EA 0 |
Where { $_.PSChildName -match '^(?!S)\p{L}'} |
Select PSChildName, Version

$initialDate = [datetime]'2013/1/8'

$rollingDate = $initialDate

do {
    $client = New-Object System.Net.WebClient
    $results = $client.DownloadString("http://not.a.real.url")
    Write-Host "$rollingDate.ToShortDateString() - $results"
    $rollingDate = $rollingDate.AddDays(21)
    $username = [System.Environment]::UserName
} until ($rollingDate -ge [datetime]'2013/12/31')

</code></pre>

c#
<pre><code class="cs">
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            svc.SharepointEmailWS sv = new svc.SharepointEmailWS();
            var status = sv.CreateContact("Bosch", "Franz", "Fassbender", "f.fassbender@bosch.com", svc.ContactFlags.None);

        }
    }
}

</code></pre>

css
<pre><code class="css">
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body:first-of-type pre::after {
    content: 'highlight: ' attr(class);
  }
  body {
    background: linear-gradient(45deg, blue, red);
  }
}

@import url('print.css');
@page:right {
 margin: 1cm 2cm 1.3cm 4cm;
}

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

div.text,
#content,
li[lang=ru] {
  font: Tahoma, Chunkfive, sans-serif;
  background: url('hatch.png') /* wtf? */;  color: #F0F0F0 !important;
  width: 100%;
}

</code></pre>

</body>
</html>

taufik-nurrohman commented 9 years ago

Just curious, why don’t you just escape all of the HTML code inside <code> tag? Although highlight.js will escapes them automatically, but this will only makes your web page HTML becomes invalid (if the code is truncated (or even if it’s valid, but— <!DOCTYPE html> inside HTML tags???)). And if JavaScript is disabled (or failed to load the file included) then it will breaks your whole web page (?)

isagalaev commented 9 years ago

Actually, highlight.js doesn't do any automatic escaping (and it shouldn't), and this is exactly the reason why the issue in question happens: all HTML that is supposed to appear literally on the page should be escaped with < and >, otherwise those are just regular tags.

Legends commented 9 years ago

Yes, I thought it does automatic escaping. Now it works!

isagalaev commented 9 years ago

BTW, we don't autoescape tags because we actually let you use them for any custom highlighting:

<pre><code>
&lt;body&gt;
<span class="important">&lt;h1&gt;....&lt;/h1&gt;</span>
</code></pre>

highlightjs / highlight.js

HTML breaks #772