I am building a static blog, which uses Marked to parse markdown. I want to be able to have code blocks with tabs.
I want to parse code that looks like this:
```JavaScript
var geolocation = require("nativescript-geolocation");
```
```TypeScript
import geolocation = require("nativescript-geolocation");
```
To something like this (from the angular2 docs), where the tab names would be JavaScript and TypeScript.
I am programming in JavaScript (nodeJs), so I could manually render this if required? What would a custom implementation of a code block tab look like?
I am not sure if there is a special name for these, as I can't really seem to find any examples or templates.
I think answer is: 'Marked' does not support custom tags. I've spend few hours trying to find some way to extend it and finally switched to showdown.
It appears to be really easy to implement one ( her is expandable section tag example ).
Extension 'showdownjs/prettify-extension' implements code highlighting using Google Prettify.
Related
My github jekyll structure looks like next:
after I enter _posts and create .md file, it looks like:
the corresponding code is:
Generics were introduced to the Java language to provide tighter type checks at compile time and to support generic programming.
The generics looks like:
```Java
List<String> list = new ArrayList<>();
//add item to list
String s = list.get(0);
```
or
```Java
public class Box<T> {
// T stands for "Type"
private T t;
//other code
}
```
The most commonly used type parameter names are:
```
E - Element (used extensively by the Java Collections Framework)
K - Key
```
We can see that the format is nice, such as it has syntax highlight.
I called it preview page
However, when I enter into my page by typing my github page url to see, it likes:
I called it real page
We can see that real page looks bad, e.g. there is no syntax highlight, there are multiple borders for quoting code syntax etc.
Thus, how to make the real page format is the same as preview page?
I suppose that you're relatively new to Jekyll so I have to do some clarification to you.
The result that you call "preview" is the result of your markdown parsed by GitHub. All markdowns have something in common so it's very likely that even if your parser is different almost all the things are parsed similarly. You could see a difference at the beginning of your "preview": the yaml content is displayed as a table.
Let's come back to Jekyll. If you're using the default settings, the parser of your code is kramdown (you could change it in the _config.yml file). When you execute Jekyll, it builds your website. That means that it parses your markdown and convert it to HTML. How it converts to HTML depends on a lot of things based on your configuration and plugin installed.
By default, you have no highlight. If you want to change it, take a look at the jekyll documentation. By default, it uses Rogue but you can also use Pigments or some other highlighter of your choice.
I don't think that this answer covers all your doubts and certainly not all your problems but it's to let you understand that your question, as it was posted, have not so much sense since your "preview page" and your "real page" are two completely distinct things. So google a bit, find what you want to achieve and ask a new question (you will surely have one in the near future).
Happy coding!
I've been search for a couple of months now for nice swagger to HTML converter and I can't seem to find anything that will generate something that looks like the Strava API reference (https://strava.github.io/api/v3/routes/#list) or the Paypal API reference (https://developer.paypal.com/docs/api/payments.billing-plans#plan_create).
They are not the only one with this template so I'm guessing it's an HTML generator that I just couldn't find with my google search skills. Anybody knows how to generate doc looking like this without coding it yourself?
Given that you already have the Swagger/OpenAPI spec, you can use Swagger Codegen to generate documentation.
Go to https://editor.swagger.io
Import your Swagger spec under "File" in the top menu
Under "Generate Client" in the top menu, select Html2 (preferred), HTML or dynamic HTML.
(https://editor.swagger.io leverages https://generator.swagger.io to generate code and https://generater.swagger.io is powered by swagger-codegen)
I'm looking to build a system that styles the search results from DocumentCloud (and allows me to link to a given document).
I know I can query DocumentCloud and return JSON results using a search string like this:
https://www.documentcloud.org/api/search.json?q=obama
I don't know how to:
Grab the output of the search and put it on my own page
Style the data once I have it on my page
I'd just like to know how to get started with this, I'm experienced with HTML and CSS but I've never worked with JSON before.
There's more info here but I just don't know where to get started: https://www.documentcloud.org/help/api
It sounds like you're not so familiar with JavaScript, correct? JSON stands for JavaScript Ojbect Notation, so to work with it, you'll have to dive in a bit. I strongly recommend looking into using a JavaScript framework/library, namely jQuery to handle the heavy lifting. (There are other worthy libraries, but jQuery is by far the most popular, and is very friendly, using CSS-like selectors to manipulate the document object model).
check this jQuery tutorial: How jQuery Works
Here's a primer on using jQuery's jsonp to fetch remote rsults and using them in a page: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
You might end up with code in a javascript file, or a script tag (following a link to the jQuery library) that looks like this:
$(document).ready(function () {
$.getJSON('https://www.documentcloud.org/api/search.json?q=obama&callback=?', null, function (results) {
// this would append whatever the json returns for 'total'
// inside an element on your page with an id of 'resultsCount':
$('#restulsCount').append(data.total);
});
});
As a result, extra text & markup can be added to elements you already have on your page in whatever form/position you need it, and regular CSS rules from any style block or CSS file linked on your page will apply to them.
Good luck.
I'm trying to add localization support to a Google Chrome Web App and, while it is easy to define strings for manifest and CSS files, it is somewhat more difficult for HTML pages.
In the manifest and in CSS files I can simply define localization strings like so:
__MSG_name__
but this doesn't work with HTML pages.
I can make a JavaScript function to fire onload that does the job like so:
document.title = chrome.i18n.getMessage("name");
document.querySelector("span.name").innerHTML = chrome.i18n.getMessage("name");
but this seems awfully ineffecient. Furthermore, I would like to be able to specify the page metadata; application-name and description, pulling the values from the localization files. What would be the best way of doing all this?
Thanks for your help.
Please refer to this documentation:
http://code.google.com/chrome/extensions/i18n.html
If you want to add localized content within HTML, you would need to do it via JavaScript as you mentioned before. That is the only way you can do it.
chrome.i18n.getMessage("name")
It isn't inefficient to do that, you can place your JavaScript at the end of the document (right before the end body tag) and it will fill up the text with respect to the locale.
Dunno if i understand exactly what you are trying to do but you could dynamically retrieve the LANG attribute (using .getAttribute("lang") or .lang) of the targeted tag and serve accordingly the proper values.
I am trying to load and parse html in adobe air. The main purpose being to extract title, meta tags and links. I have been trying the HTMLLoader but I get all sort of errors, mainly javascript uncaught exceptions.
I also tried to load the html content directly (using URLLoader) and push the text into HTMLLoader (using loadString(...)) but got the same error. Last resort was to try and load the text into xml and then use E4X queries or xpath, no luck there cause the html is not well formed.
My questions are:
Is there simple and reliable (air/action script) DOM component there (I do not need to display the page and headless mode will do)?
Is there any library to convert (crappy) html into well formed xml so I can use xpath/E4X
Any other suggestions on how to do this?
thx
ActionScript is supposed to be a superset of JavaScript, and thankfully, there's...
Pure JavaScript/ActionScript HTML Parser
created by Javascript guru and jQuery creator John Resig :-)
One approach is to run the HTML through HTMLtoXML() then use E4X as you please :)
Afaik:
No :-(
No :-(
I think the easiest way to grab title and meta tags is writing some regular expressions. You can load the page's HTML code into a string and then read out whatever you need like this:
var str:String = ""; // put HTML code in here
var pattern:RegExp = /<title>(.+)<\/title>/i;
trace(pattern.exec(str));