The markdown code below can be rendered in Jupyter notebook locally in my browser, but it doesn't reader on GitHub (instead shown as broken image icons)
<img src="img/plot1_m_over_n=5.svg" width="500"> <img src="img/plot2_m_over_n=10.svg" width="500">
There's a lot of math so I used Jupyter notebook (LaTeX) for the readme (no code cells, just lots of markdown cells), and I know there is a python solution here (In [8]), but I don't want to show the python code. I just want the SVGs to be rendered! Plus it can't resize the svg. How can I adjust the markdown code above so that it can be rendered on GitHub?
Related
On the github.docs I saw that it is possible to create markdown todo-lists as follows
- [ ] my first task
- [ ] my second task
When I am trying this in VSCode in a .ipynb Markdown cell, it doesn't render the todo-list. So it basically does not show rendered square but rather shows it just as I typed it in. So it does show it as this
but not as this
I am using the Jupyter extension for VSCode.
I think it has to do something with this extension. However, rendering a table for example works. Also including pictures and basically any other Markdown command I tried. Only the todo-list does not.
Can anyone help with this?
According to this GitHub issue, VSCode does not support markdown todo-lists out of the box. However, you can use the Markdown Checkbox extension, which renders todo-lists in .ipynb Markdown cells.
For reference, this is what the result looks like.
A cell output in one of my Jupyter notebooks has a vertical scrollable side bar. When I added this notebook to my GitHub repository, the full output (which takes up a lot of space) was displayed. Is it possible for GitHub to display the cell output with a sidebar?
Below is a minimal working example illustrating the problem. Here is a screenshot of a cell in a Jupyter Notebook that has a scrollbar:
If this notebook is converted to HTML via jupyter nbconvert --to html name.ipynb and viewed in a browser (to replicate publishing and viewing the notebook on GitHub), then the output looks like this (there is no scrollbar):
I found the following related links, but no one has posted a solution yet:
How to get a vertical scrollbar in HTML output from Jupyter notebooks
How to add a vertical scrollbar in html output from jupyter notebook with nbconvert?
Any help would be appreciated!
In my Jupyter Notebook, I have a Markdown cell like this:
### <font color='#fa8072'> Title 1 </font>
This works fine in Jupyter Notebook, but after I uploaded this file to GitHub, this cell just not showing at all.
Is there a way to fix this? Or, is there a GitHub-approved way to custom text color? (this file is a text-heavy report, so I hope to add some color for titles and subtitles.)
Thank you.
You can use one of these methods to show the Markdown text, but it will display in black on GitHub.
<span style='color:green'>TEST</span>
<h1 style='color:green'>TEST</h1>
The green color will only display when you open the file in a Jupyter Notebook. Please share if you find a better solution.
When I upload a Jupyter Notebook into Github, the markdown html for coloured text doesn't work, it just shows up as
<font color=#C8CAC6> table of contents </font>
If colours cannot work in Github, is there an alternate to Github where I can upload my Jupyter Notebooks with coloured text? Also, is there a fast way to remove all the HTML code, so it doesn't appear on Github?
Because I wanted to be able to re-size images in markdown I've been using the HTML img and specifying the desired width/height.
I'm referencing the image using a relative path, so for example for markdown in the same directory as an images folder I'd write:
<img src="./Images/MyImage.png" width="600">
This has all worked fine using Visual Studio Code but when the markdown is pushed to the VSTS Wiki it isn't rendering the image.
Is this a bug or is the img tag not supported?
You can use the following syntax to resize them (see =WIDTHxHEIGHT at the end):
Notice though that the syntax to support image resizing is only supported in pull requests and the Wiki.
So for your use case I would use (in your markdown files):
Please refer to the following documentation for images in markdown.
https://learn.microsoft.com/en-us/vsts/project/wiki/markdown-guidance?view=vsts#images
The Wiki of course support the standard HTML syntax. Please see this blog for details.
Q : This has all worked fine using Visual Studio Code but when the
markdown is pushed to the VSTS Wiki it isn't rendering the image.
The
The root cause is that you used a relative path, <img src="./Images/MyImage.png" width="600">, the image can be found on you local machine. So you can see the image when open the markdown file in Visual Studio Code locally.
However when you pushed to the VSTS, the path is changed. So it cannot find the image for rendering the image in Wiki. You need to capture the link address (URL) for the image, then use the URL in img tag like this:
<img src="https://xxx.visualstudio.com/f081441f-c072-4ed5-9407-85683e9b0888/_apis/git/repositories/e291904f-4668-4fba-8575-3f67898e3058/Items?path=%2Ftest%2F0116-workspace.png" width="600">