Jquery plugin for Converting HTML to Markdown - javascript

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.

Related

Why isn't TinyMCE 5 rendering formatted html on page and in database?

I am programming newbie and I need your help.
I'm coding my first project and I ran across problem.
I needed text editor so I included TinyMCE 5. I'm coding in JavaScript and using mongoDB.
I included tinyMCE like this
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>
Everything works fine, https://imgur.com/a/hjwKipE
Until I try to save it to the mongoDB database: https://imgur.com/a/iaFRaP6
and render it on the page: https://imgur.com/a/o2rgK1X.
This is code I managed to grab from other StackOverflow post: https://imgur.com/a/JTWpgay
My goal is to render text on page(in ejs file), without html tags.
Thank you for your help,
Marian
Make sure you are getting plain html to write the textarea tag:
<textarea>
<p><strong>This is the strong text</strong><br></p>
</textarea>
So don't use the set the init_instance_callback, instead write the html to the textarea tag.
If you use the init_instance_callback, make sure ur template write only plain html.

How to have collapsable headings in markdown?

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.

Convert RTF to HTML in Javascript

Is there a way to convert RichTextFormat to HTML in Javascript?
Iam trying to paste the RTF content copied , from clipboard iam getting the text/rtf content, now i need to show it with all styles applied in a div. how can i achive this ?? any suggestions?.
Eg:
if i copy
ghkasjhdk
gjhgjh
^^ this as RTF
i will get a string simmilar to this
{\rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{\f0\fnil\fcharset0 Calibri;}}
{\*\generator Msftedit 5.41.21.2510;}\viewkind4\uc1\pard\sa200\sl276\slmult1\lang9\b\f0\fs40\par
\b0\fs22 ghkasjhdk\par
\b\fs40 gjhgjh}
i need this to be converted to html with <strong> tags and <br>'s respectively
You may wish to adapt this NodeJS package: rtf2html.
I understand this has already be done with an older version, as you can see in this Github repository.
After you get the corresponding HTML code, you can add it to your container using the usual DOM methods, or a library like jQuery if you are already using it.

How do you style XML documents being displayed on a web page using either Javascript or CSS?

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!

How to generate a PDF out of a rendered HTML element?

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.

Categories