Click the image icon in the toolbar, paste the image URL into the "URL or Filename" field, and click Insert image.
Select the img line that is created, then click the center-justify icon. You get the following in the "Code" pane, and the result is not rendered as a centered image in the "Rendered View" pane:
If you share the .md file on the Public server, the image does not render correctly there, either.
Workaround
The following works. Center, then add the image.
Click the center-justify icon to create a div with align='center'.
Put the cursor between open and close div tags
Click the image icon and paste in the image URL as before. You get the following, which does render correctly in the CoCalc "Rendered View" as well as on the share server:
I don't think this is a problem we should or can solve. If anything, we might want to remove the "align center" functionality, since it's really not part of markdown.
This is about centering a remote image in a .md file.
Start with a URL to some image in the clipboard, for example: https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Proton_proton_cycle.svg/330px-Proton_proton_cycle.svg.png
Open a .md file in the CoCalc editor.
Click the image icon in the toolbar, paste the image URL into the "URL or Filename" field, and click
Insert image
.Select the
img
line that is created, then click the center-justify icon. You get the following in the "Code" pane, and the result is not rendered as a centered image in the "Rendered View" pane:<div align='center'>![](https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Proton_proton_cycle.svg/330px-Proton_proton_cycle.svg.png)</div>
If you share the .md file on the Public server, the image does not render correctly there, either.
Workaround
The following works. Center, then add the image.
Click the center-justify icon to create a div with
align='center'
.Put the cursor between open and close
div
tagsClick the image icon and paste in the image URL as before. You get the following, which does render correctly in the CoCalc "Rendered View" as well as on the share server:
<div align='center'><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Proton_proton_cycle.svg/330px-Proton_proton_cycle.svg.png'></div>
NOTE: The
<div>
align
attribute is deprecated. Should we be usingstyle="text-align:center"
instead ofalign='center'
?