I am quite new to Jekyll and I am not sure how I can go about creating a website with p5.js sketches embedded into it for a project that I am working on.
I suspect it has something to do with dependencies and I would much appreciate any help/pointers I can get!
There is nothing special about the combination of Jekyll and P5.js.
The important thing to understand is that the output of Jekyll is "just" regular HTML. You can include a P5.js sketch inside any HTML page. So you can include P5.js in Jekyll just fine.
Here is an example page that embeds a P5.js sketch in a website created using Jekyll. Here is the source markdown of that page. Jekyll takes that markdown and outputs HTML.
It's going to be hard to be more specific than that, but the general answer to your question is to focus on the HTML and focus on any errors you're getting.
If you still can't get it figured out, please post new question that includes a link to an example Jekyll repo that shows the error, and include the full error in your post.
I wondered the same and #Kevin Workman's examples worked. Note that you don't need to add the entire javascript code in a script object, you can point to it (I for one didn't know any of this until an hour ago)
You can add something like this in your post's .md file to reference a file called "myjavascriptfile.js". Note you can also use a hosted version of the p5.js file
<div id="sketch-holder"></div>
<script src="https://cdn.jsdelivr.net/npm/p5#1.1.9/lib/p5.js"></script>
<script src="myjavascriptfile.js"></script>
The "sketch-holder" thing gives you a bit more control over the sketch and requires you to add this to the setup() function:
function setup() {
....
const canvas = createCanvas(something, something)
canvas.parent('sketch-holder')
....
}
im using a joomla template in my localhost. I would like to edit one of the on-screen module's position. i used chrome and firefox to inspect the elements and even changed the properties. it works the way i want, but the problem is, im not sure where these actual files are residing in my localhost. There are 100s of files and its frustrating there isn't an easy way to find out the exact file that i have to edit.
I understand that joomla contents are generated on the fly and thus it isn't easy to find the exact file. I have also seen some of the past related questions in stackoverflow.com, asked by desperate users like myself, nothing works.
Im hoping someone knows of a tool or a trick that can help me. I even tried indexing the localhost folder (c:\wamp\www\demo) to search file contents, it doesn't seem to work for some reason.
Pls help.
The position of the module is almost certainly determined only by the css in your template. Using web inspector in Firefox or Chrome you can see which file (and the file path) of any styles that are currently being applied to the module, so you can simply modify the rules in that files.
I love Mac
Since my files are in the localhost, i have been trying to search for the div class that is generated on the fly, but my pc couldn't thoroughly search the contents of the file.
On my mac, i searched for the div class word and hey! it showed me a list of files that contained the div class and i found the file in a matter of seconds! how cool is that!!
Thanks Guys, hope this helps someone too!
I am wondering if there is some way to change where CKEditor looks for images. Right now it uses the location of the web page containing the editor as the root directory but I would like to write a javascript function that can change this directory to any arbitrary path passed to the function.
The bigger picture for this is that I'd like to extend the functionality of CKEditor to be able to save the source it creates to whatever location is picked by the user. I've already implemented getting the source and saving it using wxWidgets but am having trouble getting CKEditor to change its working directory so that images can be included from the directory the user picks.
I've tried using some of the properties like baseDir, basePath, and baseHref to make this possible but as far as I can tell none of them quite do what I'm looking for.
So the process would be:
(1) The user picks a directory where the source will be saved
(2) The user creates a page using CKEditor where images from the directory chosen can be included AND DISPLAYED in CKEditor
(3) The user saves the source of their page to the chosen directory (the source saved here should use the relative path to the images because the source is now located in the same directory as the images it includes)
I realize this is a rather unconventional use of CKEditor but if someone might be able to kick me in the right direction to making this happen, I'd really appreciate it.
EDIT:
So after a little experimenting and changing some backslashes to regular slashes, it looks like the baseHref attribute does what I'd like. I've still not been able to change its value at runtime though as I would like. Does anybody know if this is possible with CKEditor? I'd still like to have a javascript function that I can pass a path to and have it change this baseHref value. Right now I have set its value in config.js.
If this isn't possible, I know you can read and write the source in and out of the editor. So I would like to resort to reading and storing the source from the editor, reloading CKEditor with a new config.baseHref, and then writing the source back into the editor. Does anyone know if the CKEditor api provides functionality to reload its configuration?
Thanks.
I don't expect too many people will be trying to do what I was doing here since CKEditor is usually hosted on a server somewhere, but in case someone finds it helpful, here's what I ended up doing.
As I mentioned in the edit to my question, modifying the baseHref gave me the functionality of prepending the image filename with the directory path leading to it. I wasn't able to find a way to modify it while the editor was running so I ended up telling CKEditor to load an external configuration file each time it started with the line
config.customConfig = 'C:/Users/kenwood/Desktop/MarkCreator2/ckeditor/custom_config.js';
Then I used C++ to write new contents to custom_config.js any time I wanted to switch directories.
Unfortunately this method meant I had to read the contents out of the editor, refresh the page, and then write the editor contents back in any time I wanted to change directories. This was adequate for what I needed though.
I am trying to add an image to the README.md in my repository using markdown below:
But the image is not showing when I visit my repository.
Instead the link to the image is showing up. Clicking the link will open the image in new window.
I have also tried using relative path:
But this is giving page not found error.
What is the correct markdown to display image in README.md
Both README.md and image file are in same path/directory.
What is the correct way to display an image in github README.md?
Complete content of README.md file is as below:
Voice-controlled-MP3-Player
===========================
A MP3 player which accept voice command like PLAY, PAUSE, FORWARD, etc. Using C# and Microsoft Speech API.
Updated content
Since January, 30th 2013, GitHub now supports relative links in markup documents.
This means that your code  would now work flawlessly.
As pointed by #Brad, this may also ease a scenario where the images are different in two branches, but bear the same. In that case, switching from one branch to another, would dynamically switch the image in the rendered view, thus without requiring any change to the Readme content.
Blog post announcement
Help article
Previous answer when GitHub wasn't supporting relative links
You have to use the raw url format. In your case that would be https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg
This means that the correct markdown would be the following
Using this in a .mdfile on github will display the following picture ;-)
Update following your comment
where is this officialy documented that we have to use raw...i couldn't find it anywhere
This URL format is an undocumented feature of the GitHub site. This means that it could change later. If that ever happens, in order to "rediscover" the new format, click the Raw button when displaying a image. This will "open" the image in your browser. Copy the URL and Voilà!
Note: Although the repository is no longer on hosted on GitHub, I've updated the urls to reflect the new GitHub policy regarding user content
You really should use relative urls. That way they'll work better for private repos as well.
supposing your repo has latest.png inside the screenshots folder.
~B
For relative URL's to work with images, wrap it inside the paragraph tag.
I was facing the problem, especially when working with the single image.
Example:
<p>
<img src="relativePath/file.png" width="220" height="240" />
</p>
An extension to previous answers...
The image would not show for me when the line:
Was directly below a <h2></h2> line and I needed to add an empty line between them.
Hopefully this saves someone some time!
Thought I would update this for 2019 as I had trouble figuring this out for myself. I uploaded my images to a repo on GitHub, and then used the raw url of the image to import it into my markdown file. To get the raw url, click on the specific image link in GitHub so you are on the page for that specific image. To the top right of the photo, there are two buttons, "Download" and "History". If you click "Download", it takes you to that raw url with the picture taking up the full screen. Copy that url, and then paste it like this in your markdown file:
The button used to say "Raw" not "Download" so I hope this helps people find it.
This may not be relevant to previous answers. I have the same question as the OP - I was directed here and it didnt help me. I hope I can help add light to this question however - as it covers the possibilities of why images does not render in README.md file.
The issue I encountered is that the file name README.md file is written as readME
Not only its missing .md its also written differently.
Apparently, we should not rename the README.md file. It has to be the original name of that file in order to render the images or gifs you want to upload on github README.md page. Hope this helps someone, in rare of occasions, just like I did.
Check the file extensions because .png is not the same as .PNG.
Also use / instead of \ while specifying the file path.
Side note, when using reStructuredText use:
.. image:: /screenshots/latest.png?raw=true
I've tested with "Copy path" and in some locations this was working and in others it didn't.
In the cases it didn't, I copied the permalink and used it instead.
It doesn;t work when there are any html tags just above the line where image is being imported. You can try removing the html code or add some blank lines for the image to show on Readme.
This is just to help someone who is still having issues with image rendering in README.md:
If your image is named Some Name.png and you are trying to attach it in the README.md like , it won't work. The image has to be saved without any spaces in the file name.
So Some_Name.png with  will work.
Make sure you check the case of the file extension. They have to match (either capital or lowercase). If you have my_image.PNG in your root directory and you add  to your README file, it will not work. For some reason, Windows likes to capitalize file extensions sometimes. Unfortunately, Git does not recognize extension case so if you try to fix it by just changing the file name, you won't be able to commit the changes to the repo since Git will think everything is up to date. So you either have to update README.md or do some workaround like moving the file out of the directory, making a commit, then editing the file name then moving it back and doing another commit.
I had to add a <br> to return a line in order for the image to show on mine. This discovery was inspired by the comment in this thread to leave a blank line after a tag.
I have downloaded WkHtmlToXSharp (which uses WkHtmlToPdf under the hood) and opened the solution.
When I run the test given with the project - CanConvertFromFile, it gives me a nicely formatted PDF output.
But as soon as I delete even a blank space from the source HTML file ( WkHtmlToXSharp.Tests\Resources\page.xhtml) it renders only text with no HTML structure in place i.e. all text on the page is rendered as a single line.
I am finding the same problem with my dev project using WkHtmlToXSharp.
I suspect this is due to change of character encoding of the source file. Do you know what the character encoding should be? Is this an issue with WkHtmlToPdf as well?
Note: Sorry for the slightly misleading tag (WkHtmlToPdf), the site did not allow me to create tag WkHtmlToXSharp.
Many Thanks!
wkhtmltopdf assumes UTF8 as default, but there's a property (WebSettings.DefaultEncoding) which can be used to override the encoding expected.
However, your problem looks more like you are re-using a disposed instance or something similar. May you describe a bit deeper your use case.. is it an ASP.NET application? a console project? are you running under visual studio's dev web server?
I believe the cause of this is in the issue tracker on Pablo's repo. Issue #7: Only works first time
datimson commented 25 days ago
Also, for the sake of helping anyone else who might have this problem, when debugging with WkHtmlToXSharp in ASP.NET you need to stop the ASP Development server before restarting or rebuilding the application - this is what was causing my text only PDF outputs.