This is quite similar to what is being asked in this post, but the post does not seem to work for GitHub's parsed Markdown.
Simply put, let us say I have a PDF in a GitHub repository. Is there any way to render/embed that in a markdown file that is in the repository (e.g. the README.md file)?
I would also be open to having the PDF in a location other than GitHub and linking to it from the markdown file if that is what is required to make this work.
Currently there is no way to preview a pdf in github markdown, however you can embed an image of the pdf.
Edit
From here:
The best you can do is a greasemonkey extension which would allow you to call a pdf viewer, like the recent pdf.js (a Portable Document Format (PDF) viewer that is built with HTML5.), allowing you to view a pdf entirely online, without any pdf plugin installed.
As far as I know, this is not possible on GitHub.
However, you can upload it as a file in the same repository and then add a link to it with a relative path.
[Some title here](FILE_NAME.pdf)
I am creating a web using RStudio and HUGO, by means of the Blogdown package.
When serving the site locally in RStudio, it seems to be rendered properly. All the files are created within the folder /public.
However, when I open the file index.html from the /public folder, I get this appearance.
I am employing the theme Mainroad with this base URL:
baseurl = "/"
Any idea why when opening the HTML file it is not rendered properly?
Thanks to the HUGO forum, I post the answer that worked for me, just in case somebody get here.
It is pretty simple, just by adding two lines at the top of the config.toml file:
relativeURLs = true
uglyURLs = true
Open the html file in a text editor and check the exact links given for the stylesheets. More than likely, it is not resolvable by the web-browser because it starts with a / and so looks like an absolute path.
When viewed via the microserver packaged with hugo, that would be seen as relative to the server. But when view via a file url, it is seen as an absolute path.
Blogdown has released an updated version on CRAN that may address this issue. See this link for discussion: https://github.com/rstudio/blogdown/issues/372
I am using GitHub pages for my website!. I add new pages as md files, which nicely works when there are no figure included.
However, when I did some analyses in RStudio (.Rmd file) the final md file does not display any figure or leaflet object when used with GitHub pages. When I include the html file directly everything works nicely except for the fact that it does not look like the rest of my site (which I want, of course). I have to mention that I use an adapted version of the beautiful-jekyll template! by Dean Attali!.
I was wondering why it is not working. Maybe it is due to an issue with some css file. Remember: When I load RStudio's html output everything is displayed as intended. Here! is a link to the respective GitHub repository.
I hope that there is someone out there having an answer to this.
Thanks!
Note: In case you cannot access the repository/files, you can download the files here. It's the .Rmd as well as the output as .md and .html, and the .RData. As said before, including the .html works, but doesn't have the formatting according to my .css. .md fails in the way it doesn't show figures or leaflet objects, but the formatting is fine. Have a look.
Now, the issue with missing figures was solved.
One has to be careful where to place the folder containing all figures. It has to have the same path as the .md files.
Additionally, the embedding has to be changed in the .md file from  to .
That's it for the figures. Now I'm looking for a smart way of handling the leaflet objects.
I added a project site to my Github project. But some photos are not displaying in the site.
Img code:
<img src="img/screenshot2.PNG" class="img-responsive" alt=""> </div>
folder structure (img is a folder):
img
Screenshot2.png
index.html
I tried with .png and .PNG (some earlier SO answers suggested it) and none of them work
Any solutions?
Nevermind, I solved it.
If anyone has the same problem.
GitHub Pages are case sensitive. Not only for folders, but also for image names.
Write what you see.
It is Screenshot2.png. With a lower-case png and a capital S at the start.
As #dnivog mentioned, GitHub's servers take a little time to update files.
If nothing of the above addresses your situation, just check back in a little while. ⏳
Adding my two cents for googlers: Git Pages seem to ignore the directories starting with underscore, so make sure you don't have <a href="_images/whatever.jpg">.
yes, i have the same problem
There are two most powerful ways to solve it
pay attention to the writing of image extensions, because on github pages Images.png is different from images.png
if in your code you write src on image like this src="/images/images.png" just remove / at the beginning of the section, and it will solve your problem.
While hosting a website on Github,I faced the same issue.The image file was saved as an .jpg extension on my local(in small letters) and It was working fine. I pushed the same to github. That did not work.
I had to change the extension to .JPG (in caps)since it was the original extension of the image.Github Pages are case sensitive to the name of the files being uploaded.
I had this problem today. I solved it by:
Double-check the Case Sensitive of the images (i.e. Screenshot.png isn't the same as Screenshot.PNG or even screenshot.png)
Double-check the PATH of the image. For me; It was ../img/myImg.jpg, and I changed it to ./img/myImg.jpg to point to the current directory of the project
After fixing the 2 mentioned issue above, it worked fine... Hope it help you get unstuck!
I had a folder on my laptop named "assets", but when I pushed to Github it became "Assets". I had to change it in my HTML so I could view the images on the Github page
The repo on my laptop:
The repo on GitHub:
I had a similar issue, except I used git-lfs to manage the images. GitHub Pages doesn't support LFS, which will prevent the image from being displayed.
I tried using both JPG or jpg but it didn't work.
I tried below steps and it worked fine.
Try using the complete path. Let's say your image is inside repo-name/img/pic.jpg. Then use https://username.github.io/repo-name/img/pic.jpg instead of just /img/pic.jpg.
for anyone still scrolling through the answers:
do the following steps:
Make sure the image has actually been uploaded on your remote. On your main repo page , click on the name of the image, and see if it opens: if yes continue to next step
Load the site with "Github pages"
Open up inspect element (DevTools) , go to the html element in your .html file OR your CSS Style where you have defined your src
Here try out all the various solutions that people have described above [what worked for me: I added ./to the beginning of my src => ./name-image
whichever solution works, make that change in your local html or CSS and push to github.
I had this exact same problem, GitHub Pages appears to be case-sensitive for images, and I wrote .JPG instead of .jpg, once I changed my image extension to be lowercase it worked.
I struggled quite a while until I saw one post by Elharony: https://stackoverflow.com/users/5560399/elharony
talking about case sensitivity. It turned out Jupyter notebook is case insensitive for image files, but GitHub is. That solved my problem.
If you are importing file into your JS file and using relative path.
Remember to have the relative path from the HTML file and not from JS file as it'll finally compile into the HTML file only.
my original <img src="images/walnut.png" change to <img src="/blob/main/images/walnut.png"
Will work on github hosting pages
You can try by putting the "image link address" from the github repository, in the 'src' attribute of the 'img' tag of the HTML code of your file.
In case anyone has this problem while using jekyll to build a github site, there's yet another variation on this problem. It's a variation of the several answers above to prepend '.' or '..' on the image path in regular html. In the case of jekyll, which renders markdown source files, what should be prepended is {{site.baseurl}}, where baseurl is provided in the jekyll config file and is the root directory of the github repo. In other words:
will render locally,
will render on github pages as per the several answers above, and
will render both locally and on github pages, which is the best way to do it with jekyll since all the coding of the site can be done locally in advance of pushing to github.
I had the same issue In my case the issue was of /
<img src="/Images/shared/desktop/logo.svg" alt="" class="logo" />
I was using this for my Image in html in local machine it was working fine
but in github its not displaying image
but when I removed / from the path it worked
<img src="Images/shared/desktop/logo.svg" alt="" class="logo" />
I had the same problem with GitHub pages:
instead of ../img/image.png, I wrote ../img/image.PNG and now it works fine.
I know this is not a solution but somehow worked for me.
Just in case if someone encounters this error!
I had the same problem, and I changed 'img' folder to 'image', then it worked.
I know i can convert an MD file to HTML with a bunch of scripts.
I become part of a site which is hosted on github, and it has a place_holder.md file. I can view its content if i isit to place_holder domain. If i change anything in the md file, and i push it to the repo it get updated immediately. If i visit the place_holder.html i can see its content, even that the file is not in the github repo
So my question is:
Does github hoster stuff has an auto md converter which i cannot see? In this case where can i get something like this?
Do webbrowsers understand markdown by default? Then why dont i see place_holder.md in the url?
Thanks
If i visit the place_holder.html i can see its content, even that the file is not in the github repo
Of course you can look at the place_holder.html file it is an html file on your computer that your browser can render so you can view it.
Does github hoster stuff has an auto md converter which i cannot see?
I do not believe github has an "auto md converter".
In this case where can i get something like this?
You can use jekyll to convert your plain text and markdown to static html pages which you can host on the web. You also can get text editors to preview your markdown before you convert it into html which can be helpful. Here is one online text editor.
I'm not sure how you're asking to implement this, but take a look at marked. It's super easy to use and very flexible.