Example HTML on Safari is all on one line #398
Comments
|
This happens is phetsims/qa#662 too. Assigning @pixelzoom so he is aware. |
|
I reproduced the problem and identified that it was introduced in https://github.com/phetsims/studio/issues/219. I tried a newer version of highlight.js but it had the same error modes. We do need line commenting for the feature in https://github.com/phetsims/studio/issues/219. There just is not much paper trail on line breaks in highlight.js, so I tried prism.js and it is highlighting all cases correctly in this patch (requires prism 1.23 in sherpa) Index: main/studio/js/customizeWrapperTemplateForAction.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/main/studio/js/customizeWrapperTemplateForAction.js b/main/studio/js/customizeWrapperTemplateForAction.js
--- a/main/studio/js/customizeWrapperTemplateForAction.js (revision e69b752fbd790ffb3335042d7bd7de5f1f786fca)
+++ b/main/studio/js/customizeWrapperTemplateForAction.js (date 1624592303446)
@@ -77,18 +77,20 @@
( !window.phetio.Client.IS_BUILT ?
- ( ' <link rel="stylesheet" href="../sherpa/lib/highlight.js-9.1.0/styles/tomorrow-night-bright.css">' +
- ' <script type="text/javascript" src="../sherpa/lib/highlight.js-9.1.0/highlight.js"></script>' ) :
- ( ' <link rel="stylesheet" href="../../contrib/tomorrow-night-bright.css">' +
- ' <script type="text/javascript" src="../../contrib/highlight.js"></script>' ) ) +
+ ( ' <link rel="stylesheet" href="../sherpa/lib/prism-1.23.0/themes/prism-tomorrow.css">' +
+ ' <script type="text/javascript" src="../sherpa/lib/prism-1.23.0/prism.js"></script>' ) :
+ ( ' <link rel="stylesheet" href="../../contrib/prism-tomorrow.css">' +
+ ' <script type="text/javascript" src="../../contrib/prism.js"></script>' ) ) +
'</head>' +
'<body>' +
- ' <pre><code class="html" id="template-wrapper"></code></pre>' +
+ ' <pre><code class="language-html" id="template-wrapper"></code></pre>' +
'<script>' +
' document.getElementById( \'template-wrapper\' ).innerText = decodeURIComponent("' + encodeURIComponent( template ) + '");\n' +
- ' hljs.initHighlighting.called = false;\n' +
- ' hljs.configure({ useBR: true });\n' +
- ' hljs.initHighlighting();\n' +
+ '// apply syntax highlighting\n' +
+ 'Prism.hooks.add( \'before-highlight\', env => {\n' +
+ ' env.code = env.element.innerText;\n' +
+ '} );\n' +
+ 'Prism.highlightAll();' +
'</script>' +
'</body>' +
'</html>';
Index: main/phet-io-wrappers/index/index.html
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/main/phet-io-wrappers/index/index.html b/main/phet-io-wrappers/index/index.html
--- a/main/phet-io-wrappers/index/index.html (revision 30e06914ef0577c7e0f793d48a54ee7b3a24827c)
+++ b/main/phet-io-wrappers/index/index.html (date 1624592245779)
@@ -17,6 +17,7 @@
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="index.css">
+ <link rel="stylesheet" href="../../sherpa/lib/prism-1.23.0/themes/prism-tomorrow.css">
<script src="../common/js/assert.js"></script>
<script src="../../query-string-machine/js/QueryStringMachine.js"></script>
<script src="../common/js/Client.js"></script>
@@ -24,8 +25,9 @@
<script src="../common/js/loadWrapperTemplate.js"></script>
<!--<script src="{{PATH_TO_LIB_FILE}}"></script>-->
- <link rel="stylesheet" href="../../sherpa/lib/highlight.js-9.1.0/styles/tomorrow-night-bright.css">
- <script type="text/javascript" src="../../sherpa/lib/highlight.js-9.1.0/highlight.js"></script>
+<!-- <link rel="stylesheet" href="../../sherpa/lib/highlight.js-9.1.0/styles/tomorrow-night-bright.css">-->
+<!-- <script type="text/javascript" src="../../sherpa/lib/highlight.js-9.1.0/highlight.js"></script>-->
+ <script type="text/javascript" src="../../sherpa/lib/prism-1.23.0/prism.js"></script>
</head>
<body>
<div class="content">
@@ -153,7 +155,7 @@
demonstrate the PhET-iO API and features for this simulation, and can be used as examples to begin new wrapper
development. Here is a basic example/template for a wrapper:</p>
- <pre><code class="html" id="template-wrapper"></code></pre>
+ <pre><code class="language-html" id="template-wrapper" style="white-space: pre-wrap"></code></pre>
<button id="launchTemplateButton">Launch Template</button>
<p>This file can be used as a template for beginning your own wrapper development. Alternatively, you can launch the
Index: main/phet-io-wrappers/index/index.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/main/phet-io-wrappers/index/index.js b/main/phet-io-wrappers/index/index.js
--- a/main/phet-io-wrappers/index/index.js (revision 30e06914ef0577c7e0f793d48a54ee7b3a24827c)
+++ b/main/phet-io-wrappers/index/index.js (date 1624592042821)
@@ -109,9 +109,12 @@
template = template.replace( new RegExp( '//{{AFTER_SIM_INITIALIZED}}', 'g' ), '' );
template = template.replace( new RegExp( '//{{LAUNCH_OPTIONS}}', 'g' ), '' );
document.getElementById( 'template-wrapper' ).innerText = template;
- hljs.initHighlighting.called = false;
- hljs.configure( { useBR: true } );
- hljs.initHighlighting();
+
+ // apply syntax highlighting
+ Prism.hooks.add( 'before-highlight', env => {
+ env.code = env.element.innerText;
+ } );
+ Prism.highlightAll();
document.getElementById( 'launchTemplateButton' ).onclick = () => {
const popup = window.open();I tested in Mac/chrome and Mac/safari and it highlighted both correctly, including line comments and line breaks. However, it takes around 7 seconds to highlight when using studio => preview HTML (on my speedy computer). No delay in index.html/index.js though. UPDATE: I'm no longer seeing this problem. Not sure what was causing it. UPDATE: The problem occurs in safari, I probably incorrectly tested on chrome. I'm not sure which repo to track this in since it will require code changes in phet-io-wrappers and studio repos. UPDATE: Let's track in the common code issue: https://github.com/phetsims/studio/issues/219 |
|
A proposed fix is up for testing in https://github.com/phetsims/studio/issues/234 |
|
Here's a transcript of the commands I used to cherry-pick the changes for gravity-and-orbits: cd ../sherpa
git checkout -b gravity-and-orbits-1.5
git cherry-pick b74635e2351551e81b5035013e1eb48fda493ae2
git push --set-upstream origin gravity-and-orbits-1.5
cd ../studio
git checkout -b gravity-and-orbits-1.5
git cherry-pick eaf319c4d9bb4be6b341eda24026c45eac3131c6
git cherry-pick 218d2547cbf3e0a1e964586a1b66058fd118c9e1
git push --set-upstream origin gravity-and-orbits-1.5
cd ../phet-io-wrappers
git checkout -b gravity-and-orbits-1.5
git cherry-pick 634ffeadb16b64930db510482c9e9a9640ed316b
git push --set-upstream origin gravity-and-orbits-1.5
cd ../chipper
git checkout -b gravity-and-orbits-1.5
git cherry-pick 99e1abb571dc62d37aa07449c64d93dd3fb51f49
git cherry-pick b8e0a0d630db8e9c42e96685d79e4c330ed2d314
git push --set-upstream origin gravity-and-orbits-1.5
cd ../gravity-and-orbits
grunt --brands=phet,phet-io
cp build/phet/dependencies.json .
git add dependencies.json
git commit -m "Update dependencies.json with SHAs for cherry picks for syntax highlighter https://github.com/phetsims/gravity-and-orbits/issues/398"
git push origin 1.5Ready for testing in next RC. |
samreid
added
status:ready-for-qa
and removed
status:on-hold
status:ready-to-cherry-pick
labels
|
This can be confirmed by testing if the example HTML in the index wrapper and from Studio => Preview HTML looks formatted correctly (not a single line) on Safari. |
11 tasks
|
Looks good in rc.2 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Device
iPad 6th Gen
OS
iPadOS 14.6
Browser
Safari
Problem Description
For phetsims/qa#657. Also seen on Mac Safari.
The example html is all on one line in safari, making impossible to read and at least difficult to copy. Not on Win 10 Chrome.
Visuals
The text was updated successfully, but these errors were encountered: