Bug with JavaScript template strings?

37 views
Skip to first unread message

PM 2Ring

unread,
Oct 10, 2023, 1:30:18 AM10/10/23
to sage-cell
There appears to be a bug in SageMathCell when running in HTML mode with the handling of JavaScript template literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals . These literals are like Python f-strings. The syntax for string interpolation requires a dollar sign, but that causes some kind of corruption in SageMathCell. Here's a small demo. (I backslash-escaped the dollar to prevent the corruption).


Is this a bug? Is there a workaround?

Andrey Novoseltsev

unread,
Oct 10, 2023, 9:29:17 PM10/10/23
to sage-cell
$ signs are used for LaTeX markup. The collision is unfortunate and it is possible to use other delimiters for LaTeX, but there is no reason to break existing code now. Why do you want to run complicated HTML/JavaScript through SageMathCell at all? I suspect it is better to build your page independently and then insert Sage code into it, rather than make the whole page part of Sage code.

Best,
Andrey

PM 2Ring

unread,
Oct 11, 2023, 4:07:28 AM10/11/23
to sage-cell
Ah, good point. I can live with the inconvenience of template literals without dollar signs. I *definitely* wouldn't want to compromise the current functionality of LaTeX in Sage!

Template literals aren't *that* complicated, and are very common in modern JS. They're much nicer than building up strings by concatenation with +.  (They're still useful even without the dollar sign for templating, since they permit multi-line strings).

FWIW, I mostly do Sage & Python in SageMathCell, but I occasionally do a bit of HTML / SVG / JS. I don't currently have access to my desktop machine and it's nice to be able to code on my phone. One of my "hobbies" is creating geometrical diagrams in SVG using Sage / Python. The resulting SVG files tend to be much more compact than SVG output created via matplotlib.

Andrey Novoseltsev

unread,
Oct 11, 2023, 11:18:18 AM10/11/23
to sage-cell
That's an interesting observation, do you have any idea why this is the case? I thought that Sage uses matplotlib under the hood for plots ;-)

William Stein

unread,
Oct 13, 2023, 1:35:45 PM10/13/23
to Andrey Novoseltsev, sage-cell
I think they're saying that they have two ways to make an SVG:

1. Using matplotlib's built in SVG output support,
2. Their own custom svg creation code, which doesn't use matplotlib at
all, but instead uses their own knowledge of SVG.

It's like using a "word doc --> HTML" convertor versus hand crafted
HTML, and it makes sense that it could be more compact.

William
> --
> You received this message because you are subscribed to the Google Groups "sage-cell" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to sage-cell+...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/sage-cell/9ebfb744-dbd1-44a3-9307-7bfc4bb7004fn%40googlegroups.com.



--
William (http://wstein.org)

PM 2Ring

unread,
Oct 22, 2023, 3:27:36 PM10/22/23
to sage-cell
Sorry for the delay, I was in JavaScript hell. ;)

Yes, as William says, I use my own SVG creation code. This is easy to do using f-strings, particularly since braces are fairly rare in SVG. Here's a recent example:
 https://sagecell.sagemath.org/?z=eJxtVFuP6jYQfkfiP4y8aolpNgnQK4egqi99OtJRj9Q-7K6QCQ5x17Gp42ygUf77GccJZTnlwRnGc_lmvhkTQuAje-XA4GjEAXQOJya5tfyxZKcTP0CmpTb4rf6pmeEVCAWf__x9OgH8_WUEWirYX-DTR1j-IdQRlslyFSW_RKtkOiGETCfTyYHnsNfn4BzCJYSMrr234bY2CvLZpq44FIbnKXlAOwLnlLTn-SLpCFxQvHgxk6yqUpLlbdaReDsbQ-cucJOu7uOSVgVnuo7apss7EpnKGnEKZsmMXuVoRscoWVXthtID_I7BdG0hBfKsSPS3Fip4ymcRIhBd2-ZCynVbdV0387YAuTYgQui7xFVdcsOGcC_0vujKXiTfPqsWU3TPahN7xbWsEmnZVW_HYC919lphieJgixAKLo6FDR1PmClDyOn3I9oGrxHuIoG5N4fvYBH6_97PKVwGZz2Uiw73xY8WBWcHvM6RyOfpZINo4FxKhSwU1p7Wcdw0TdSsIm2O8TJJkhgtiHPtkyN1edAjnDcUCfQIbrSF074J3vymkfIEEkCuoC06sp1O2gFQh4mxH9XWxd0YnlkQh5T0gzKkWST_BUc5RtNNPPhsjmANUxVSU6akF6UjJYl-CAEP2uPte58SHAv9ytcPq9XqA_g_j1Io7qhfG12rwwdv3d_02dcY42qrTywT9oK6n1wJw_y7TnoS34-S24k5M8eK9oPjJDc43nQcGMuE9G6b-LjduA5vyd0stY6nrvWOXetcuusc6dedYULtdRPgRIYg6zJFfLiIBX6vWyPdXeamJw9QpiF-s-L91D7lRL_KrAhatECisgKPPChqTjtKbpcAVa6UCtt9xF6HsPrRH1GMIOiLA_erUBYXJLMe587BSz9ziQxrEzyJx4XfJxfoZETJdz4a8rZa0pcQ0IvV0qaLhIYuOYISiqmMp7nUzCLFP1NXk9Elu6qW9KuteYAGyrqysOc-0bBM2AuE5Dem7wIqPARXw-h7-3xmWmHzlXsHOcNmnpjAXmgj_nUXUl7gW3jjxorM_bmbjKfhgQzOLiXFlQ0uXvoGsTw6wfXj4vphevHciy8DEoSubDAfn4uKn1I3bPRm3THL_4yDb9rYqaEwt-vp149Q79MfN-9Pf9J3MNBnDFRgqsKWstfRLxXk6EM=&lang=sage

Here's an older one, which actually uses some of Sage's mathematical power: 
https://sagecell.sagemath.org/?z=eJyNVltv47YSftevYBUUphxZluTN6daNU9guWhTI2bOL3fahrmEoMmUzkiUtSV9iw__9zJCSrCSbokFgkTPDuX4z5BWR5ZoJRnhO4iJnLgl_IeOyyLIi51Huks9__mZZiSg2wM4yFite5JLwTVkIRZbs65Y13ELIp4a1lruFKhZi9WBVlHy7KZ9IJEleWpYIyYjkVH4VioaOY22iQwqU4L1vWXEWSUmmXMRDi8DfYiGzQsnFAgQ6R5KSY0oEWXY8WWZcUUcLgYIl8H29ieFsxiTsZ3NLU5YsAT0852qxoJJliUuOLkldsnSMEfxDugdk_U2rL2qtRBtB9M2rLMKHNnvU10jxhKQX5Y0BgXGSPklfs46YgyPpvuBp9VVMXlSWLF_qGC6mWCbZG6Y-QFXfstTOjWClqHLTSolgaityktjoAz2Zs2eXmFXarJZnx7as_4kVqJ1Oqe9Y42rlkoFjTcxGhC7pBY41hW1v4gHgHrerSDGooXVFJoVYMkEynjPpIlDqMhYJOTJRkHgrdhH4wzwLfUZBxJgRo2OXTCrP70E_pRPSI2MHsvm7SVQVi47kHgoQPUh677gEXAR_rTE6-S2d1nT8mjN1Qbc1mb7mTFwyxXg-Viw6Qy1AhBNz1zTKyH7Ioji1XaLWPE4hYDnyvfAGwj4wOfo1gnq6JOEryY9s9B7UfcYMoueQY5cE8A9E6D8g6y40KfyNFRumBI9JKYqVALXQrjpZqxKD2alDlSJsDkwAUDBN3tHkSGHmpKYIB3IE62u91lwEzdhLga6sGuHkDlsgfQWZBndHVBmASoW1QHvXYKaLNl-VxTTaGJruugowIctiAc7DOZfcQ9xylcPvfahXYRUNFuizXu3XPGPki9i2-gELe4m_3Z8TwqX29HnzPAgWXVoQ8lt33cxYp6ai94Ezd94SCy9iYVsMXZ1AZDoqEBhPdDmnY9Mahj5p6JOpLrUhT2s5Q-81KWIyjoRikqbASsF0OqjrzFebCEymAaQ0DfFnUHV9ppARQin0GE6DruGH3XSg5bpp8KxztC7XnDSGo-amoBCyS0ol23bdxsrFw-5sCwhKCkG2eOnAifkFXMbb68rEv4bYPxo7ftOaRmVtDnyHLOjjTjOZ6-EOKpYvNCA638AuzH_LYBDwUKWiyoxpVa8syowl9b31CfvwG1msg_80fAtggC8QnPlzfWAWwPfTP-DxhXj478SDl-IWXuxllDGlGN6vcJ4SHKHvYXj96MM4peTdTbW90dv_tLgoHoQV4QfNhzu_vQ1xCiIJT6N4-M5Hnhv4WvvAfyY-eKZ9bmC5eRIRzx-KPYU4YLRCU-x2o6CCJnhvXga42RxgnWRFpCjNWE5b4TkwswLEQ26yhBjgiAER5StG89Y1iUo4QGhzaEiPRm8haGvk4HjFefvYUNbgIHiHDm0BVnQH3C0OStWaSBp9KAXGj7yk3ZaXs8fh43U4d-aX7lg9gDr7ygZ9tu09Fjyns6Rz4rmivncD1PDmprt1hn54OHdemkEbl8cbXfd1hqXsyn6Aqd_tujtctbEDrtTYgTPPZgawqppEKVvI3YpWafuAl7T9d25fHiEJhRm_H928fn_kpQfObSK10KValIXk-BKNMjxSChZzvOlGe5dscw7XYX2Fwl24GXV6HcdYgTeoeahWt6l-tBlQCExPw3eJbRZwRSMs2k8wB5lmaTs1oqp--HDf5NuLT_xMTqeEZ9nwJM_nJtcaSJBTTDUDk0zgG6gF2osXvvcD_vzo6N7Dw3GRJPh8Cl68dFuWbw2VxIeRfUpo7B09uNAy6jhnm8RPDZFvopUhioomtAS-v0d2fKLa1jWJvaVDvr8k72z379qxxBhIO0O1r5sIX6C-92xYJp1O52_r9ufDJiM7JnTd7MDzbchFXCx5vhrZf3z5tffeJlJF-TKC0chGdl7YP99Zt4AgAidzcHCtVDns9_f7vbcfeIVY9UPf9_sgYZM9X6r1yAbs2mTH2X5SQC584hMIM-yK8DrsgnPOGffv6o2N-tUTZE49lWBSsYPqx1Ii_bvZ9Jfxl_HMOlXFPlvzOdD7-gAsAIOqNgvt8b1N1oyv1qreIQxG9lWSJJA963YF0Ixyiage2XBdwcMx0De6axgZQgKcA1e1by562qMDvXPwtU20yl5RRjFXUFSACjpaRmpNliP7v747IPd4SIRwvBfoTb3-C5MLjoNtJYqUDa8gdT8Rs-npMIa-5_s3P2krwxxqgH6fqgqfIfLV3S0m-86CglrWR31d1j1u7Tm4UcBIoLa53jysC3TO3nbwbZ-YHk-8veAQ6UfHMh2IzfYRO-zhSen-kmvoiLXaZEB2_g9E3wxd&lang=sage


:)

Andrey Novoseltsev

unread,
Oct 22, 2023, 11:22:56 PM10/22/23
to sage-cell
Mesmerizing!-)
Reply all
Reply to author
Forward
0 new messages