How do I put HTML, JS and CSS in a Github page .md file? - ruby

I'm writing a post for my Github-hosted site. I'm writing to my-first-post.md.
I have Javascript in script tags, CSS in style tags, and HTML in divs and spans.
When I paste the code in the .md and run jekyll serve thru Ruby, all I get is a page with the raw HTML.
What am I doing wrong?

"HTML is a publishing format; Markdown is a writing format." --daringfireball
Markdown is supposed to be simple.
You shouldn't be putting javascript into markdown unless you have a good reason to be doing so and even then I don't think every markdown converter will process javascript.
Ideally, your markdown should be confined to this list and maybe some simple HTML.
Any CSS or javascript should be included as part of your theme.
Edit, explaining jekyll filestructure:
So your Jekyll site should have a file structure that looks something like this. In very broad terms, your CSS and javascript should be in the default.html file located in the _layouts folder. You'll probably notice that the file appears to be a regular HTML file, more or less. The blog post--which is the markdown after it has been converted to HTML--will insert itself into the layout at the {{ content }} tag.
Also, the CSS and javascript doesn't have to be in default.html. It can also be in external files that you link to from default.html

Use MDX. It can do a lot. But if you want to use something more appropriate for the task at hand, I'd suggest looking into Astro . You can find more on these websites. For astro you can install the CLI and write markdown in less than 2 minutes. And also, it's very fast and integrates with a lot of frameworks.

Related

Is there a built-in markdown flavor for Firefox?

I like to use markdown languages like GitHub markdown and ASCIIDoc to provide lightweight formatting to text documents. The tags in HTML are too heavy and render the original text almost unreadable.
The problem is when I send documents to other users. They can't be bothered with installing a markdown plugin. I would like to use a markdown flavor that will render predictably in web browsers. That way I can send a URL for my document and the recipient will see the formatted text.
Is there a standard markdown language built into Firefox?
Thanks,
(PS: this is a serious question. Pedants please restrain yourselves.)
Unfortunately, at the moment, there are no major web browsers that natively support parsing and rendering markdown.
However, there are a few solutions.
Render the markdown to html and send the html document. Most renderers automatically include Stylesheets that make the html look good, or you can edit the output or templates yourself.
Get the recepent to install a extension that will render the markdown. I quickly found something by googling firefox markdown extension.
I hope this solved your problem.

Embedding html comments while using kramdown, jekyll and github-pages

I use github, github-pages, kramdown and jekyll to publish my static sites.
I need to embed html comments that are visible when viewing the source of a page. The reason for this that I want to be able to visually use comments to differentiate between the different parts of raw source html markup. This is doable by using regular html syntax:
<!-- here's my comment -->
The problem I've encountered is that while I serve my jekyll site locally I do see comments in the page source, but once pushed to my github repository the comment isn't visible anymore. However it's still visible in my repo when viewing the raw markdown source file.
The behavior I expect would be seeing my comment in the page source code like I do locally. I've tried kramdown comment syntax:
{::comment}
here's my comment
{:/comment}
This works but this way I don't see it in the page source at all. Another solution I've tried is the workaround described in this response. It works but it produces an actual html tag and therefore any clear separation between the comment and the other html tags is lost.
The bottom-line is that I want to see the comment when viewing my page source even after pushing my files to my repository.
Is there something I'm missing here or isn't it possible to keep html comments intact while used in conjunction with github-pages?
EDIT: Turns out it was not a markup or Github problem after all. I use a CDN service, this minified the HTML and stripped away HTML comments.
Please check there is no "HTML Minification" running on GitHub which could be actually removing comments while serving for save bandwidth.

Embed external html file using iframe in Sphinx

I'm trying to embed an interactive graph, which is saved as an html file, in a reStructuredText document using iframe:
.. raw:: html
<iframe src="filename.html" height="345px" width="100%"></iframe>
The html file is in the same directory as my .rst file, but the graph does not display, and I'm getting a file could not be found error.
However, if I paste the external html file in the _build/html directory, the graph displays fine. How do I properly embed this html file, so that the graph is embedded automatically when I make html?
Working example of the thing that I want.
You can also include a file directly:
.. raw:: html
:file: filename.html
May not be what you wanted, but may help others coming here from google...
You could put the file filename.html in your source/_static directory. It would then be copied into build/html/_static, so you would have to replace the iframe attribute by src="_static/filename.html".

CKEditor - have it return markdown syntax instead of HTML

I'm working on a CMS platform and I am planning to use CKEditor as it seems to offer everything I need.
One thing that is a bit of a bother to me is that I want my content to be in markdown format instead of html and while I found a BBCode extension for this, I couldn't figure out how it can be remade to support markdown.
I tried to find an editor that does markdown out of the box, but the ones I found are way too simple for what I need and CKEditor has the benefit of having a plugin system to adjust perfectly for me.
CKEditor now has a Markdown addon that does this exact thing. The addon project is hosted on github.
Screenshots:
See also: Integrated Markdown WYSIWYG text editor (2012)
Using Markdown instead of HTML is a very bad idea for several reasons:
Markdown has no spec, so every library works differently in details. The output which you'll produce using CKEditor may give a different (even totally wrong) result when transformed to HTML by your back-end. For example - escaping image's title and link texts - you won't be able to ensure that the text user inserted does not break the output.
Not all HTML can be transformed to Markdown.
There are plenty of tricky cases which are totally correct in HTML, but cannot be done in Markdown.
Markdown has fewer features than HTML, so you'd lose some content which users produced.
You actually gain nothing by using Markdown instead of HTML.
I am a CKEditor core developer, so I know it very well. I tried to implement a Markdown writer for CKEditor and very quickly I found that it's completely pointless. I don't say that it's not possible, because it is, but only a limited stability can be achieved - too low for anything I would personally want to use in production.

How to change extension of files generated by Jekyll?

How to generate not *.html files with Jekyll but files with another extension? I would like to patch it with rb plugin. Is it possible?
I tried this (googled this), but it doesn't work:
module Jekyll
# Extensions to the Jekyll Page class.
class Page
def output_ext(ext)
".myext"
end
end
end
If you want an output to _sites/ with your extension “from the box”, you can use only pages files — they're not using the permalink from the config, so those files would have the same extension you gave to them.
So, the smallest set is a file page.my-ext at the root of your project, having a YAML front matter (could be empty) like this:
---
---
Foo
Such file would be visible to the Jekyll, you could use any liquid markup inside, or use any layout for it, and then this file would be saved to the _sites/ with the same name it was before.
You can't use such file in /_posts/, 'cause when there is a permalink set, Jekyll saves files only as .html.
Custom plugin with converter works for me, but also only for simple pages — posts from /_posts/ are still getting .html, so it seems that it's hardcoded there.
So, the only way right now is to use simple pages instead of posts. And if you'd like to iterate through all such pages as you can do with posts, you should read on how the pages_list module from Jekyll Bootstrap is made — I think it's something like that.
EDITED:
Sollution found here:
http://jekyllrb.com/docs/permalinks/
You can specify the permalinks in the markup post. It will unfortunately not work if specified in _config.yml
According to my tests, if you enter:
permalink: /whatever/filename/with/arbitrary.xtension
in the markup post, your index file will be named "arbitrary.xtension" and placed in the folder:
/whatever/filename/with/
For other applications where the content of the file needs to be consistent to the extension, this plugin might perhaps help you:
https://github.com/fauno/jekyll-pandoc-multiple-formats

Resources