search

Komodo / KomodoEdit

Komodo Edit is a fast and free multi-language code editor. Written in JS, Python, C++ and based on the Mozilla platform.
http://www.komodoide.com/komodo-edit
Other
2.16k stars 305 forks source link

HTML5 Tidy add SVG elements #3439

Open babobski opened 6 years ago

babobski commented 6 years ago

Short Summary

Currently are inline SVG elements not recognized. See this discussion on the forum.

Additional Information

Workaround

Use this config file to add the missing svg elements. Note not all the svg elements are added.

mitchell-as commented 6 years ago

Hi, thanks for the report. Would you please supply your new config in relation to Komodo's existing config? https://github.com/Komodo/KomodoEdit/blob/master/src/lint/koHTMLLinter.py#L1020 Your config and Komodo's config is so different I don't know how to merge them. Thanks.

babobski commented 6 years ago

Oke, I will take a look

babobski commented 6 years ago

I'm looking in to this, but I'm a bit confused about the "new pre tags" configuration. If I look at this configuration the article is added as "new pre tag", but when I look at the specification it described as a block level element.

If I look at this issue at hmlt5-tidy only phrasing content is allowed inside a pre tag, so a div for example is not allowed in a pre tag.

If I test this out, I'm not getting a linting error in Komodo, so I'm a bit confused when to use a pre over block level element.

mitchell-as commented 6 years ago

I will defer to whatever you end up thinking is best. Thanks for your efforts.

babobski commented 6 years ago

@mitchell-as I've gotten pretty far, but I'm still having problems of some kind. I added all the svg elements and tested it with this configuration file:

new-blocklevel-tags: figcaption,figure,footer,header,hgroup,output,section,details,dialog,main,nav,ruby,defs,g,marker,mask,patern,switch,filter,
new-inline-tags: bdi,time,track,mark,menuitem,meter,progress,rp,rt,wbr,altglyph,altglyphdef,altglyphitem,animate,animatecolor,animatemotion,animatetransform,circle,clippath,color-profile,cursor,desc,ellipse,feblend,fecolormatrix,fecomponenttransfer,fecomposite,feconvolvematrix,fediffuselighting,fedisplacementmap,fedistantlight,feflood,fefunca,fefuncb,fefuncg,fefuncr,fegaussianblur,feimage,femerge,femergenode,femorphology,feoffset,fepointlight,fespecularlighting,fespotlight,fetile,feturbulence,font,font-face,font-face-format,font-face-name,font-face-src,font-face-uri,foreignobject,glyph,glyphref,hkern,image,line,lineargradient,marker,mask,metadata,missing-glyph,mpath,path,pattern,polygon,polyline,radialgradient,rect,script,set,stop,style,switch,symbol,text,textpath,title,tref,tspan,use,view,vkern,
new-pre-tags: article,aside,canvas,video,summary,svg,

Syntax checking says I'm fine:

afbeelding

Only in my document I'm still getting error lines:

afbeelding

Test-file

<!DOCTYPE html>

<html>
<head>
    <title>

    </title>
</head>

<body>

<article class="film_review">
    <header>
        <h2>Jurassic Park</h2>
    </header>
    <section class="main_review">
        <p>Dinos were great!</p>
    </section>
    <section class="user_reviews">
        <article class="user_review">
            <p>Way too scary for me.</p>
            <footer>
                <p>
                    Posted on
                    <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
                </p>
            </footer>
        </article>
        <article class="user_review">
            <p>I agree, dinos are my favorite.</p>
            <footer>
                <p>
                    Posted on
                    <time datetime="2015-05-17 19:00">May 17</time> by Tom.
                </p>
            </footer>
        </article>
    </section>
    <footer>
        <p>
            Posted on
            <time datetime="2015-05-15 19:00">May 15</time> by Staff.
        </p>
    </footer>
</article>

<progress value="22" max="100"></progress> 

<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
</nav>

<wbr>

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby> 

<menu type="context" id="mymenu">
    <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
    </menuitem>
    <menu label="Share on...">
        <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
        </menuitem>
        <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
        </menuitem>
    </menu>
    <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter> 

<p>Do not forget to buy <mark>milk</mark> today.</p> 

<main>
    <h1>Web Browsers</h1>
    <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

    <article>
        <h1>Google Chrome</h1>
        <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
    </article>

    <article>
        <h1>Internet Explorer</h1>
        <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
    </article>

    <article>
        <h1>Mozilla Firefox</h1>
        <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
    </article>
</main>

<article>
    <p>
        The Disney movie <cite>The Little Mermaid</cite> was first released to theatres in 1989.
    </p>
    <aside>
        <p>
            The movie earned $87 million during its initial release.
        </p>
    </aside>
    <p>
        More info about the movie...
    </p>
</article>

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result">60</output>
</form>

<!-- Just a figure -->
<figure>
    <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
</figure>
<p></p>
<!-- Figure with figcaption -->
<figure>
    <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
    <figcaption>MDN Logo</figcaption>
</figure>
<p></p>

<canvas id="canvas" width="300" height="300">
  An alternative text describing what your canvas displays. 
</canvas>

<hgroup id="document-title">
    <h1>HTML</h1>
    <h2>Living Standard — Last Updated 12 August 2016</h2>
</hgroup>

<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos, 
but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>

<ul>
    <li>User <bdi>hrefs</bdi>: 60 points</li>
    <li>User <bdi>jdoe</bdi>: 80 points</li>
    <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

<section class="progress window">
    <h1>Copying "Really Achieving Your Childhood Dreams"</h1>
    <details>
        <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
        <dl>
            <dt>Transfer rate:</dt>
            <dd>452KB/s</dd>
            <dt>Local filename:</dt>
            <dd>/home/rpausch/raycd.m4v</dd>
            <dt>Remote filename:</dt>
            <dd>/var/www/lectures/raycd.m4v</dd>
            <dt>Duration:</dt>
            <dd>01:16:27</dd>
            <dt>Color profile:</dt>
            <dd>SD (6-1-6)</dd>
            <dt>Dimensions:</dt>
            <dd>320×240</dd>
        </dl>
    </details>
</section>

<dialog>
    <h1>Add to Wallet</h1>
    <label for="num">How many gold coins do you want to add to your wallet?</label>
    <div><input name=amt id="num" type=number min=0 step=0.01 value=100></div>
    <p><strong>You add coins at your own risk.</strong></p>
    <div><label><input name=round type=checkbox> Only add perfectly round coins </label>
    <div><input type=button onclick="submit();" value="Add Coins"></div>
</dialog>

<!-- Video with subtitles -->
<video src="foo.webm">
  <track kind="subtitles" src="foo.en.vtt" srclang="en"
    label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv"
    label="Svenska">
</video>

<svg id="Layer_1" x="0px" y="0px" width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174" >
<ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path id="bird" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03  c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341  c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933  c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991  c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875  c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489  c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309  c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876  c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413  c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566  c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156  c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351  c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247  c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331  z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111  C434.693,207.929,439.613,203.01,445.731,203.01z"/>
</svg>

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

<svg height="30" width="200">
  <text x="0" y="15" fill="red">I love SVG!</text>
</svg>

<svg width="120" height="120" viewBox="0 0 120 120">

  <defs>
    <pattern id="Triangle" width="10" height="10"
        patternUnits="userSpaceOnUse">
      <polygon points="5,0 10,10 0,10"/>
    </pattern>
  </defs>

  <circle cx="60" cy="60" r="50" fill="url(#Triangle)"/>
</svg>

<svg width="100%" viewBox="0 -20 100 50">
   <switch>
      <text systemLanguage="ar">مرحبا</text>
      <text systemLanguage="de,nl">Hallo!</text>
      <text systemLanguage="en">Hello!</text>
      <text systemLanguage="en-us">Howdy!</text>
      <text systemLanguage="en-gb">Wotcha!</text>
      <text systemLanguage="en-au">G'day!</text>
      <text systemLanguage="es">Hola!</text>
      <text systemLanguage="fr">Bonjour!</text>
      <text systemLanguage="ja">こんにちは</text>
      <text>☺</text>
   </switch>
</svg>

<svg width="120" height="120" viewPort="0 0 120 120" >

  <rect x="10" y="10" width="100" height="100">
    <animate attributeType="XML" attributeName="x" from="-100" to="120"
        dur="10s" repeatCount="indefinite"/>
  </rect>
</svg>

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="50">
    <animateColor attributeName="fill" attributeType="XML"
        from="black" to="red" dur="6s" repeatCount="indefinite"/>
  </circle>
</svg>

<svg width="230" height="120">

 <filter id="blurMe">
  <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
 </filter>

 <circle cx="60"  cy="60" r="50" fill="green" />

 <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
</svg>

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

 <svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
  Sorry, your browser does not support inline SVG.
</svg>

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  Sorry, your browser does not support inline SVG.  
</svg>

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
  Sorry, your browser does not support inline SVG.
</svg>

 <svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

</body>
</html>
Naatan commented 6 years ago

What do the errors/warnings actually say?

babobski commented 6 years ago

I guess my config file was not properly loaded, if I open the file today I don't get any linting errors. Also the lines that I was seeing yesterday did not give any error message.