Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid HTML.
Sketchfab supports Markdown in model descriptions and Annotations.
Primary Markdown Syntax
These are the features most relevant to Sketchfab models.
Images
Will produce
Optionally, you can add alt text and a title (important for SEO and accessibility), like this:
Links
This is [an example](http://example.com/ "Title") inline link.
[This link](http://example.net/) has no title attribute.
This is [an example][id] reference-style link.
Other stuff goes here...
[id]: http://example.com/ "Optional Title Here"
Will produce an example link.
You can make an image that is a link by combining the link code with the image code. Use the image code instead of text:
[](http://example.com)Will produce
Videos
While you can link to a video hosted elsewhere (as described above), you cannot produce a video within your model's description or Annotations by using Markdown.
If you'd like to build a more customized experience with features like embedded videos, it's possible to do on your own website using the Viewer API.
Emphasis
*single asterisks*
_single underscores_
Will produce italic text
**double asterisks**
__double underscores__
Will produce bold text
Titles
This is an H1
=============
This is an H2
-------------
# This is an H1
## This is an H2
###### This is an H6
Lists
Unordered
* Red
* Green
+ Blue
- Yellow
Will produce
- Red
- Green
- Blue
- Yellow
Ordered
1. First item
2. Second item
1. Third item
(The number before the period has no effect on the actual order, it just needs to be a number)
Will produce
- First item
- Second item
- Third item
Other Markdown Syntax
A lot of other Markdown features are supported, but they may not be very useful in the context of Sketchfab models. See this documentation for details:
It's also supported in Help Center comments, although the implementation may not be identical.
Comments
64 comments
Is there any way to adjust the size of images shown in annotations? As I read through the documentation of Markdown I couldn't find such options, but would be happy to know any tricks.
@yshaya - Not at the moment, images will fill with width.
This is great to learn! Is it possible to have links and images in the same annotation?
EDIT: Answered my own question! You can add links, images and plain text in annotation, just watch out for 256 character limit (hint: url shorteners help)
@bematrix - Yep! Glad you figured it out :)
You can also combine the different markdown items together, for example, an image that is a link:
[](link/to/page)
I've thought it would be cool to have one click “Zoom out / Zoom in” function for the images shown in annotations.
Hi, has there been any progress in adjusting the sizes of images within annotations, or adjusting the sizes of annotation boxes so that larger images can show up using Markdown? We're interested in making the pictures larger for anatomical atlases such as at this page: http://bit.ly/2suXgNl. Thanks
Hi @holliday,
I'm afraid there's been no progress on that feature yet. As above, you can create a link to the full version as a workaround.
Hi, we're trying to call a functions on the page when the user clicks on an embedded image, like the second notation here: https://sketchfab.com/models/f73caed4328e4af7b5411001ca1a5de5
Normally markdown allows javascript code, like this:
[markdown link](javascript:alert("foo");)
I'm guessing this is not permitted in your markdown? Thanks.
Hi @jwillow
Sorry, that's correct. JavaScript is not permitted in our Markdown implementation. It would represent to great a security risk.
Hi, I was wondering if it was possible to embed images from files? Is it a must to add an html link, or is it possible to create one for the image?
Thanks : )
Hi,
We don't support uploading your own image files. You'll need to host the image somewhere else (e.g. Imgur)
Has anyone else reported not being able to view models with Markdown annotations that are embedded in Wix websites? On Android, both Firefox and Chrome browsers yield errors. Android presents a WebGL error, and Chrome simply won't load the model. This model works fine when viewed via my Sketchfab account though at Sketchfab.com.
@wingsoverwinston Hmm that sounds strange. Can you please send me a link to an example Wix site where this is happening?
Hi James - http://www.wingsover.ws/benton-test
Thanks! It's working on my end:
I don't think it has anything to do with the Markdown from what I can see. This model is quite heavy, over 3 million polygons. I suspect it's just too much for your device/browser, especially a mobile device.
Also, you uploaded a 16k texture, but the maximum we render is 8k (8192 x 8192), so your full resolution texture is never used. You can read more about performance here:
https://help.sketchfab.com/hc/en-us/articles/201766675-Viewer-Performance
By the way, it's against our Terms of Service to hide the Sketchfab logo/watermark/link in your embed like that. The Business account allows you to remove the external link from the logo, and the Enterprise account allows you to remove the logo completely.
https://sketchfab.com/plans
Hi, I am new to sketchfab and it has been great to work with thus far. I have been able to upload my virtual model to stetchfab and add the simple text annotations easily but what I would like to do is add images, like that shown in the markdown or annotate my model similar to https://labs.sketchfab.com/experiments/annotations-sync/.
I can usually find my way around a computer, and programs, easily but I am not familiar/novice with coding, etc on computers. I acknowledge that the codes have been provided but I don't know how to add them to my sketchfab model. I am trying to work it out, and find where and how I have to add the codes, but I am getting lost and unable to add these so that I can provide annotations with images & diagrams.
I was hoping you could provide a step by step explanation/instruction of how I can achieve either of these forms of annotations. Thanks.
@James Hi James - I'm having a hard time getting annotation markdown links to work in mobile view. In one annotation, I have both an image that links to a separate URL, and also a text link that directs to the same URL. Both the image and text links work beautifully on desktop but neither link recognizes mobile finger tap. The model acts as if the finger is pressing "through" the annotation onto the model such that you can rotate the model while sliding your finger on the annotation. I get the same results in Chrome and Firefox mobile browsers.
Is this a known issue? Is there a workaround? Thanks for your help!
Hi - I just tested this and the links worked correctly for me. What mobile device make/model and operating system are you using?
@James Google Pixel 2 XL and Samsung Note 9.
Thanks. Looks like someone on my team reproduced the issue and we'll be working on a fix.
Hi. Are they still working? I can create them and visualize them in edition but they are not displayed.
@sakanatik Sorry about that, we have a bug related to links in annotations. There's a fix coming soon, hopefully in the next few hours.
Hey James, is it possible through a URL parameter or utilizing Markdown to force a link in an annotation to open in the same tab in the browser?
Hey,
I'm afraid it's not possible at the moment. All links in annotation will have target="_blank"
What is the use case for opening in the same tab?
With multiple annotations on my embedded models, I don't want my user to have way too many tabs open. I'd rather them be able to use the browser "back" button.
Hmm ok, but that would require waiting for the model viewer to completely re-load and render each time, and also send you back to the beginning of the annotations.
I see. I guess I wouldn't want that EVERY time, but a command to change it for certain cases would be nice :)
Understood, I'll pass on the feedback!
Is it possible to make a target="_self" instead of blank ?
@gregg3d Not at the moment. What is the use case?
Please sign in to leave a comment.