I am using slate, https://github.com/lord/slate, for API documentation. Using slate, a markdown file is converted to HTML. I need to have collapsable sections in my final HTML page. I appreciate if you let me know about the best approach?
As far as I'm aware, markdown or slate don't support this directly. One option could be to mix the <summary> and <details> html tags in with your markdown, but then you'd have to style it yourself to match slate's style.
Related
I need a syntax highlighter which inputs a code sample and wrap its language tokens in some html element with some color CSS class. This way with only CSS and HTML syntax highlighting will work without the need of JS. I want the code to appear in an EPUB file and cause my reader (Kindle PaperWhite) does not support JS, i have to highlight my code only with HTML and CSS. My preferable programming environment is JS and Python but if there is such a syntax highligher in another language I will be glad to hear about it.
I used Ace.js on a few projects. The trick is to embed the page using some sort of iframe or the EPUB equivalent. It looks like you can embed an iframe in a kindle (just search iframe)
Am using bootstrap markdown comment box for comment option. am providing an option to edit. while editing, the html content should be appended inside the markdown. but it results in displaying the html tags.
I want to convert the html tag to markdown format. Is there any simplest jquery plugin to convert the html element to markdown??
Thanks in advance.
Dinesh
This library is probably what you're looking for, it's simple and has some interesting options.
https://github.com/domchristie/to-markdown
Note: I've never used it but I've seen it around a couple of times.
I have developed a small portal that will extract an XML document from a DB table and display it to the user.
I have pretty printed the XML document using vkbeatify.js, however I would also now like to style the XML document to represent the XML tags as a different colour from the XML Values.
How can this be achieved?
The XML documents can be of varying structures.
Apologies if this is a duplicate question, I had a look and couldnt find an appropriate solution on here.
Thanks in advance.
Edit:
At the moment the XML documents are displayed in a textarea, however I am open to changing this to something more suitable if it will allow for the XML document to be formatted and coloured appropriately.
As long as your XML schemas are known, you can use XSLT to transform the XML into HTML.
MSDN XSLT
This won't be a good solution if you need to display the XML structure itself to the user, but you will be able to color code everything in whatever way you want using html/css.
Edit:
Because you are rending the "beautified" xml in a textarea, it is just text. You cannot target the individual nodes as you could elements on a page. Even if you were able to add a class to a node, it would result in the class name being rendered in textarea. Similar to this: <thing style="background-color:blue;"> instead of it rendering as blue.
prismjs works well for syntax highlighting XML markup.
How can this be achieved?
There are several ways this can be achieved. Here's a couple of approaches you could consider:
Example 1
Method: Fetching the XML file using the File Highlight plugin:
Getting the necessary Prism Javascript and CSS:
Visit the downloads page.
Select minified version.
Select Markup from the Languages section.
Choose a Theme.
Select File Highlight from the Plugins section - (Include the Line Numbers plugin too if required).
Download JavaScript and CSS file.
HTML
Link the generated files (from step six above) to the .html page you intend to use to present the .xml as follows:
<link rel="stylesheet" type="text/css" href="my/path/to/prism.css" />
<script src="my/path/to/prism.js"></script>
Then link to the external .xml to the .html using the <pre> tag and data-src attribute as follows:
<pre data-src="my/path/to/foobar.xml"></pre>
Edit your .css as required to display the syntax highlighted .xml to the user.
Example 2
If example one above is an issue due to the XMLHttpRequest file fetching nature of the File Highlight plugin. An alternative approach, although more complex is to:
Method: Inline escaped XML to the .html page
Steps 1-6 in example one are required here too, however, there's no need to include the File Highlight plugin.
Again, the generated files (from step six above) will need to be linked to the .html you intend to use to present the .xml.
The following shows the html syntax necessary for displaying the escaped XML including line numbers:
<pre class="line-numbers"><code class="language-xml">
<?xml version="1.0" encoding="UTF-8"?>
<root>
...
...
</root>
</code></pre>
I've successfully used example two in the past and utilized nodejs to auto read the xml, escape it, and write a .html for displaying to the user. But yeah, there's a myriad of ways this can be automated.
Hope this helps!
help me to find JS text editor like on my screenshot.
http://prntscr.com/3qior4
It must have next features:
Show html tags
Change tags color to grey (or any color)
Can edit text inside html tags
Can't edit or delete html tags.
Thank you
I haven't done any investigation on finding a HtML editor that prevents user from changing HTML tags.
If you wish to block for isntance, a traductor from changing tags and focus only on text, then you should use some internationalisation librairy (like i118) and give to the traductor only the text output to modify.
If you look for a very smple interface for coding HTML, use adobe dreamweaver : http://fr.wikipedia.org/wiki/Adobe_Dreamweaver
If you look for a custo synthax color, you can use some templates for Notepad++ or Eclipse.
SynWrite editor with additional setup. Activate HTML lexer, then open html lexer properties dialog, find lexer rule for <tag> text, and change style for this rule. Changed style must have Read-only attribute set.
Refer to synwrite forum.
Is there a way to generate a PDF file in JavaScript out of a given rendered and styled element of a webpage and its content? Is there already a library for this?
I've never put it to use, but could https://github.com/thebluber/htmlToPdf be what you're looking for?
There is a library called jsPDF. It provides basic functionality to create PDF documents. It even comes with a plugin to add elements from basic HTML.