I would like to create a wiki page that is a preamble (standard markdown) followed by an HTML/JS code listing followed by (in a frame I suppose) the page that this code would generate.
Is this possible?
PS The code is: http://pipad.org/MathBox/slides_simple.html
Github Wikis allow you to embed HTML, but not all HTML tags are supported.
To embed supported HTML:
Edit a wiki page.
Ensure the edit mode is on "Markdown".
Type the html directly into the main content area (there's no "code" view, like you often see in tools like Wordpress).
Which tags aren't supported?
I couldn't find documentation on this, but we have a few clues:
Github wikis are built on a software tool called Gollum. We can see which tags are supported in Gollum by default here in the Gollum docs. Github may customize these defaults for their use-case, but I'll bet it's pretty similar.
I went ahead and created a test wiki here with all the major visual html elements added to it (copied from Poor Man's Styleguide). It looks like the main tags that don't display are iframe, video, audio, and all of the various form inputs (textarea, input, select, etc).
Related
I want to make a table in AsciiDoc on GitHub with no frame. My reading of the documentation is that this should work:
[frame="none",options="header"]
|===
| Foo | Bar
| Widget | Gadget
|===
Yet it renders with a frame:
That frame="none" setting should do it. But it doesn't. I try it without quotes and its the same. The options="header" works fine, so I know the interpreter is seeing the line in brackets and taking some action.
Is it possible that GitHub runs some version of AsciiDoc that is not full featured? If so, is there a site with the details of what does and doesn't work?
Note--this is on our internal corporate instance of GitHub Enterprise, so we may be some versions out of date, or not have some plug-in installed. Is there a special plug-in that does the trick? I don't admin the platform, so is there a way I can check versions and plug-ins in any given GitHub platform as an ordinary developer?
We use AsciiDoc pervasively as our GitHub Wiki language, so changing to another one that does tables better is not an option.
All help appreciated!
GitHub runs an official Asciidoctor to provide a nice rendering. However, they also run the generated HTML and CSS through a filtering process to prevent security issues. During that process, they strip off custom class names from a variety (if not all) elements (I don't know the exact details).
Running asciidoctor on your sample document shows a table that looks like this:
<table class="tableblock frame-none grid-all stretch">
Whereas their process results in a table that looks like:
<table>
From GitHub's perspective, those kinds of changes mean that tables look the same everywhere on the site.
If you need frameless tables, you'll probably find using GitHub Pages a lot easier because you can use custom (or asciidoctor-provided) CSS in that context.
I have been using github pages with jekyll for auto-generating my blog using markdown documents.
I would like to use reference-style links then show a list of the links at the bottom of the page.
basically, I want the reference-style links to be printed on the page, by default they are hidden.
The idea is to have a list of references that a reader can refer to for more information.
for example, the following text:
# some header
...some body text in the blog with a link to [wikipedia][1]
...
...
# reference links
[1]: https://www.wikipedia.org
should generate the following output:
some header
...some body text in the blog with a link to wikipedia
...
...
reference links
[1]: https://www.wikipedia.org
As seen, the reference-style link is used in the markdown but it is also displayed on the page.
The previous "correct" output was achieved by duplicating each line and escaping the special characters, but this seems a bit redundant.
Can this be achieved by changes to _config.yml or using ruby? Other options are also welcome (css magic?).
tldr; I want a way to "unhide" the reference-style links at the bottom of my markdown page.
First, you have to understand exactly what is doing what:
Your markdown parser is converting your markdown into html.
Jekyll is taking that html and organizing it into pages.
GitHub pages is serving up those html pages.
The client reads that html and executes any JavaScript, etc.
The problem is that the markdown parser doesn't include the reference links at the bottom of the page. It's not like they're there but hidden. They simply aren't there. So you aren't going to find a CSS solution, because there isn't anything to style. You might be able to accomplish this with a custom markdown parser that includes the reference links in the generated html, but that won't work with GitHub pages and is probably going to be pretty hackish.
Another option is to execute JavaScript that uses document.links to get every link on the page, then output them in a <ul> or something at the bottom of the page. Something like this:
var links = document.links;
for(var i = 0; i < links.length; i++) {
var linkHref = document.createTextNode(links[i].href);
var lineBreak = document.createElement("br");
document.body.appendChild(linkHref);
document.body.appendChild(lineBreak);
}
You might restrict that to only include links in a certain div (like this), that way you don't have to parse out your navigation links and whatnot. You also have to consider the order.
Another option might be to include them in each post's frontmatter as a yml list, then show those in the layout that displays the post.
Of course, you could also simply create the reference yourself using markdown.
Context
You can create a Gist on GitHub and embed it on your web page: embedding Gists.
This is an example of a randomly chosen Gist: tap.groovy.
Question
Is embedding also possible with other code files from GitHub, for example with this randomly chosen C# file ICommand.cs which is not a Gist?
You can try https://emgithub.com, which does exactly what you want.
To embed the example file ICommand.cs in your question, you can just add "em" before "github.com" in the address bar, then press Enter.
Then you can get a script tag like this:
<script src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fdotnet%2Fcorefx%2Fblob%2Fmaster%2Fsrc%2FSystem.ObjectModel%2Fsrc%2FSystem%2FWindows%2FInput%2FICommand.cs&style=default&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
Note if you simply click Run code snippet in StackOverflow, the copying button at top right corner may not work. Running it outside SO would work fine.
Unlike other websites that do similar work, EmGithub.com is a static site hosted on Github Pages. Fetching target files and highlighting are done on your browser.
Disclosure: I'm the developer of it :)
You can use https://gist-it.appspot.com/:
<script src="http://gist-it.appspot.com/https://github.com/dotnet/corefx/blob/master/src/System.ObjectModel/src/System/Windows/Input/ICommand.cs"></script>
There's a standard for embedding content from one website in another via a URL, called oEmbed. Unfortunately, GitHub is not a oEmbed provider, i.e. it doesn't support oEmbed for its URLs.
I found a proxy service, Oembed Proxy for GitHub,
which adds oEmbed support for GitHub's code URLs. You pass a GitHub URL as a parameter to the proxy's URL and a resulting URL can be be pasted in another website, assuming that website supports embedding oEmbed links.
Another obstacle is that not every website supports embedding oEmbed URLs. According to the proxy's documentation, notion is one website that supports them. I did some research and looks like it should be possible to add oEmbed support to e.g. wordpress or jekyll.
This answer provides a very limited solution, due to small adoption of oEmbed. I thought it would be worth to spread the word nonetheless.
Another possible service is https://github.com/finom/github-embed. It seems to be unmainted by now for about 2 years, but gist-it seems to be unmaintained for even 6 years. I've tried neither, though.
You can use gistYard
<iframe src="https://gistyard.piyushdev.xyz/emd.html?lang=&from=0&to=&code=https://raw.githubusercontent.com/dotnet/corefx/master/src/System.ObjectModel/src/System/Windows/Input/ICommand.cs&edit=true&dm=off" width="100%" height="330" frameborder="0"></iframe>
It provides features like changing theme , cutting code directly from raw , edit mode , custom styling and others.
I am trying to create a Editor component that will take inline javascript.
I understand that I can use clientlibs folder for loading JS, but some of the video CDN folks require you to put embed tags with JavaScript in the editor, and I think some of that is also used for rapid development. Currently with the state of RTE, I cannot put a script <script/> tag even after extending it, as it strips it out and only takes the html tags.
Could you please provide any insight if this could be doable in AEM 6.1
Here's what I have tried:
I looked at several post didn't got a clue
extended RTE using Adobe's documentation, but see a script button, that only takes html tags.
looked for hacks that could tell me what part of the code is tripping out </script> tags or could not execute js.
looked for some components out there that does that, found nothing
so far.
Is there a way in github to have a wiki's title be based on the markup? I have found another project using markdown that has the title for Home.md wiki page come from the file. The author could have also used the web interface and made the title of the page the same as the markdown. That project is here:
https://github.com/sitaramc/gitolite/wiki
When I tried doing the same thing with restructuredtext (Home.rest) using the underline of ='s the title ends up being ignored and not even shown in the rendered page. The same thing also happens when using markdown.
Looking at this pull request from a few months ago and the related discussion, it appears that the page title used to be set based on the markdown, but is now based exclusively on the filename.
That would explain why a project might have RestructuredText/Markdown that appears to define the title (it once did!), but the same doesn't work for you.
It appears that you're out of luck for defining the wiki page title through the RestructuredText/MarkDown file these days.