How to beautify HTML within javascript (pycharm)?
Within Pycharm, how can I (quickly) beautify code like the below...so it's converted to multiple lines and easy to read..without horizontal scrolling?
option-cmd-l doesn't reformat the code...perhaps there is a different beautify plugin that works with code like this?
(function () {
var loadHandler = window['sl_{FE148B8D-AB86-4CE2-A1FE-F84325CFFC4A}'];
loadHandler && loadHandler(15, '<div id="spr0_590c68dc"><div id="spr1_590c68dc" class="kern"><img id="img5_590c68dc" src="data/img28.png" width="1919px" height="1080px" alt="" style="left:0px;top:0px;"/></div><div id="spr2_590c68dc" class="kern"><div id="svg0_590c68dc" style="left:581.353px;top:722.571px;"><svg width="330" height="47" viewBox="0 0 330 47"><ellipse fill="#130f07" cx="164.855" cy="23.221" rx="164.855" ry="23.221"/></svg></div><div id="svg1_590c68dc" style="left:251.643px;top:729.007px;"><svg width="112" height="34" viewBox="0 0 112 34"><ellipse fill="#000000" cx="55.816" cy="16.657" rx="55.816" ry="16.657"/></svg></div><div id="spr3_590c68dc" style="left:-5.116px;top:399.124px;"><img id="img0_590c68dc" src="data/img57.gif" width="641.071" height="356.313" alt=""/></div><div id="spr4_590c68dc" style="left:526.944px;top:282.248px;"><img id="img1_590c68dc" src="data/img58.gif" width="396.149" height="480.073" alt=""/></div><div id="spr5_590c68dc" style="left:101.711px;top:207.366px;"><img id="img2_590c68dc" src="data/img59.gif" width="359.836" height="255.75" alt=""/></div><div id="spr6_590c68dc" style="left:392px;top:642px;"><div style="width:0px;"><span id="txt0_590c68dc" class="relpos" data-width="179.759766" style="left:60.995px;top:9.817px;">It has </span><span id="txt1_590c68dc" class="relpos" data-width="131.967773" style="left:60.99px;top:9.817px;">two </span><span id="txt2_590c68dc" class="relpos" data-width="95.390625" style="left:60.985px;top:9.817px;">ear</span><span id="txt3_590c68dc" class="relpos" data-width="51.336914" style="left:60.98px;top:9.817px;">s.</span></div></div><div id="spr7_590c68dc" style="left:392px;top:642px;"><img id="img3_590c68dc" src="data/img60.png" width="555" height="93" alt=""/></div><div id="spr8_590c68dc" style="left:392px;top:642px;"><div style="width:0px;"><span id="txt4_590c68dc" class="relpos" data-width="179.759766" style="left:58.874px;top:7.696px;">It has </span><span id="txt5_590c68dc" class="relpos" data-width="131.967773" style="left:58.869px;top:7.696px;">two </span><span id="txt6_590c68dc" class="relpos" data-width="95.390625" style="left:58.864px;top:7.696px;">ear</span><span id="txt7_590c68dc" class="relpos" data-width="51.336914" style="left:58.859px;top:7.696px;">s.</span></div></div><div id="spr9_590c68dc" style="left:551px;top:228px;"><div style="width:0px;"><span id="txt8_590c68dc" data-width="616.300781" style="left:15.271px;top:10.387px;">Yes! I have two ears!</span></div></div><div id="spr10_590c68dc" style="left:551px;top:228px;"><img id="img4_590c68dc" src="data/img61.png" width="643" height="130" alt=""/></div><div id="spr11_590c68dc" style="left:551px;top:228px;"><div style="width:0px;"><span id="txt9_590c68dc" data-width="616.300781" style="left:13.15px;top:8.267px;">Yes! I have two ears!</span></div></div></div></div>');
})();
请先登录再写评论。
there are no JavaScript formatter options for splitting long string literals.. Known JavaScript code beautifiers, like Prettier, don't support this either - see https://github.com/prettier/prettier/issues/4123. ESLint has a rule for this, but this rule doesn't have an auto-fix (https://github.com/eslint/eslint/issues/11325)
what do most people do with html embedded in javascript ? I don't use javascript very often--and this code is not written by me. Be nice to see a human-readable version of this that doesn't require horizontal scrolling.
thanks
you can prettify the code manually by adding line breaks to your string
Hi,
I would suggest two things to try here:
1. Try to convert your string literal to the JavaScript template literal which can be multiline. There's an IDE intention that can help you with that – press Alt-Enter inside the string and select Replace with template string.
2. Press Alt-Enter inside the string and select Edit HTML fragment. This will open a separate editor tab with the content of your string, properly formatted.
Hope it helps!