In the current example, a Markdown snippet is ported to HTML and the output is shown in the DIV (ID Content).
The highlight function (hljs.highlight) is set to the options markdown-it (md). However, this is not carried out.
What do I have to change so that the output uses the highlight.js?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release#10.2.1/build/styles/default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/11.0.1/markdown-it.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
var md = window.markdownit();
md.set({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre class="hljs"><code>' +
hljs.highlight(lang, str, true).value +
'</code></pre>';
} catch (__) {}
}
return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
}
});
var result = md.render('# markdown-it rulezz! \n\n```html <pre><code class="js">function test();</code></pre>```');
document.getElementById('content').innerHTML = result;
</script>
</body>
</html>
Hope it's not too late.
You must break line (\n) after your fenced code block.
So this:
var result = md.render('# markdown-it rulezz! \n\n```html <pre><code class="js">function test();</code></pre>```');
Should be:
var result = md.render('# markdown-it rulezz! \n\n ```html \n <pre><code class="js">function test();</code></pre>\n```');
This is how everything should be:
the .js files should be:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/11.0.1/markdown-it.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js"></script>
These are okay.
As for the .css, you can use the one you are using or you can use the one that is in the npm:
npm install markdown-it-highlight
get the .css file at node_modules/markdown-it-highlight/dist/index.css, that has nicer syntax highlighting color and use that.
Then you would have to set this defaults object and set this on the defaults.highlight:
var defaults = {
html: false, // Enable HTML tags in source
xhtmlOut: false, // Use '/' to close single tags (<br />)
breaks: false, // Convert '\n' in paragraphs into <br>
langPrefix: 'language-', // CSS language prefix for fenced blocks
linkify: true, // autoconvert URL-like texts to links
typographer: true, // Enable smartypants and other sweet transforms
// options below are for demo only
_highlight: true, // <= THIS IS WHAT YOU NEED
_strict: false,
_view: 'html' // html / src / debug
};
// and then do this:
defaults.highlight = function (str, lang) {
var esc = md.utils.escapeHtml;
console.log(str)
console.log(lang)
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre class="hljs"><code>' +
hljs.highlight(lang, str, true).value +
'</code></pre>';
} catch (__) {}
}else{
return '<pre class="hljs"><code>' + esc(str) + '</code></pre>';
}
};
// now set the md:
md = window.markdownit(defaults);
// now this is where you forgot the line break after the fenced code block:
const result = md.render('# markdown-it rulezz! \n ```html \n <pre><code class="js">function test();</code></pre>\n```');
document.querySelector('#content').innerHTML = result;
I outlined a few of the steps needed to get code highlighting working here: https://github.com/microsoft/AdaptiveCards/discussions/8081#discussioncomment-4219420
Summary:
Easy Way
First, make sure you support Markdown in cards:
import MarkdownIt from 'markdown-it'
// For Markdown in Adaptive Cards.
window.markdownit = MarkdownIt
Now we'll use another library to color code:
import highlight from 'highlight.js'
import 'highlight.js/styles/github.css'
Run:
highlight.highlightAll()
to update all your cards.
If you run it twice, then it will try to update cards that it already updated, and you'll get warnings. See https://github.com/microsoft/AdaptiveCards/discussions/8081#discussioncomment-4219420 for handling dynamically added cards.
Related
I am using a framework called Framework7.
In my index.html, I have some Template7 code, like this format
<script type="text/template7" id="commentsTemplate">
{{#each this}}
<div> test this template 7 code </div>
</script>
However, I want to have this part of code into an another separated file (Just like I can have many other *.js files in, say, a static folder and refer to the file by "static/*.js).
I have tried to use a typical way to import js
<script type="text/template7" id="storiesTemplate" src="js/template.js"></script>
But it doesn't work, there is also no demo/sample code in the documentation.
Any help is appreciated!
You can do it. The idea behind is to include a HTML file in a HTML file. I can tell at least 3 ways that this can happen, but personally I fully validated only the third.
First there is a jQuery next sample is taken from this thread
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html:
<p> This is my include file </p>
Another solution, I found here and doesn't require jQuery but still it's not tested: there is a small function
My solution is a pure HTML5 and is probably not supported in the old browsers, but I don't care for them.
Add in the head of your html, link to your html with template
<link rel="import" href="html/templates/Hello.html">
Add your template code in Hello.html. Than use this utility function:
loadTemplate: function(templateName)
{
var link = document.querySelector('link[rel="import"][href="html/templates/' + templateName + '.html"]');
var content = link.import;
var script = content.querySelector('script').innerHTML || content.querySelector('script').innerText;
return script;
}
Finally, call the function where you need it:
var tpl = mobileUtils.loadTemplate('hello');
this.templates.compiledTpl = Template7.compile(tpl);
Now you have compiled template ready to be used.
=======UPDATE
After building my project for ios I found out that link import is not supported from all browsers yet and I failed to make it work on iphone. So I tried method number 2. It works but as you might see it makes get requests, which I didn't like. jquery load seems to have the same deficiency.
So I came out with method number 4.
<iframe id="iFrameId" src="html/templates/template1.html" style="display:none"></iframe>
and now my loadTemplate function is
loadTemplate: function(iframeId, id)
{
var iFrame = document.getElementById(iframeId);
if ( !iFrame || !iFrame.contentDocument ) {
console.log('missing iframe or iframe can not be retrieved ' + iframeId);
return "";
}
var el = iFrame.contentDocument.getElementById(id);
if ( !el ) {
console.log('iframe element can not be located ' + id );
return "";
}
return el.innerText || el.innerHTML;
}
How about lazy loading and inserting through the prescriptions?
(function (Template7) {
"use strict";
window.templater = new function(){
var cache = {};
var self = this;
this.load = function(url)
{
return new Promise(function(resolve,reject)
{
if(cache[url]){
resolve(cache[url]);
return true;
}
if(url in Template7.templates){
resolve(Template7.templates[url]);
return true;
}
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
if(this.status == 200 && this.response.search('<!DOCTYPE html>') == -1){
cache[url] = Template7.compile(this.response);
resolve(cache[url]);
}else{
reject(`Template ${url} not found`);
}
};
xhr.send();
})
}
this.render = function(url, data)
{
return self.load(url)
.then(function(tpl){
return tpl(data) ;
});
}
this.getCache = function()
{
return cache;
}
}
})(Template7);
Using :
templater.render('tpl.html').then((res)=>{ //res string })
Or :
templater.load('tpl.html').then( tpl => { Dom7('.selector').html( tpl(data) ) } )
It is possible to define your templates in .js-files. The template just needs to be a string.
Refer to this [JSFiddle] (https://jsfiddle.net/timverwaal/hxetm9rc/) and note the difference between 'template1' and 'template2'
var template1 = $$('#template').html();
var template2 = '<p>Hello, my name is still {{firstName}} {{lastName}}</p>'
template1 just extracts the content of the <script> and puts it in a string.
template2 directly defines the string
The triple backticks in markdown render as <pre><code class="...">...</code></pre>. More specifically,
# in markdown
```java
```
# render as
<pre>
<code class="java">
...
</code>
</pre>
# my expecting result (for Google code prettify):
<pre class="prettyprint linenums lang-java">
...
</pre>
My current solution is to add the following code but it doesn't work.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=son-of-obsidian></script>
<script type="text/javascript">
jQuery(document).ready(function () {
$('pre code').each(function() {
var code = $(this).html();
var lang = $(this).attr('class');
if (lang) {
$(this).parent().attr('class', 'prettyprint linenums lang-'+lang).html(code);
}
});
prettyPrint();
});
</script>
How do I remove <code class="...">...</code>?
I used SyntaxHighlighter <pre class="brush: java">...</pre> to highlighter my code blocks in WordPress + Windows Live Writer + PreCode(based on SyntaxHighlighter).
Currently, I turn to markdown. To insert a code blocks in markdown, I use
```java
code here
```
# OR
<pre class="brush: java">
code here
</pre>
Both of them doesn't work for me, because SyntaxHighlighter requires all left angle brackets inside <pre></pre> should be HTML entries escaped.
Therefore, I install Google code prettify but encounter the above issue (incompatiable).
Try the below out and let me know if this works for you.
$('pre').each(function() {
var el = $(this).find('code');
var code = el.html();
var lang = el.attr('class');
if (lang) {
$(this).addClass('prettyprint linenums lang-' + lang).html(code);
}
});
JSFiddle Demo
You are forgetting to remove the original code object from the pre element, causing the code to be duplicated. You should call $(this).remove(); to remove the old code object.
Using the following code, I get working output:
<html>
<head>
<script type="text/javascript" src="/js/showdown.js"></script>
</head>
<body>
<script type="text/javascript">
var converter = new Showdown.converter();
alert(converter.makeHtml('*test* abc'));
</script>
</body>
</html>
Returning <p><em>test</em> abc</p>
I would now like to add an extension. The github page suggests this can be done with:
<script src="src/extensions/twitter.js" />
var converter = new Showdown.converter({ extensions: 'twitter' });
However, modifying my code to:
<html>
<head>
<script type="text/javascript" src="/js/showdown.js"></script>
<script type="text/javascript" src="/js/twitter.js"></script>
</head>
<body>
<script type="text/javascript">
var converter = new Showdown.converter({ extensions: 'twitter' });
alert(converter.makeHtml('*test* abc'));
</script>
</body>
</html>
Produces the error
"Uncaught Extension 'undefined' could not be loaded. It was either not found or is not a valid extension."
Adding the following code (as listed under the Filter example)
var demo = function(converter) {
return [
// Replace escaped # symbols
{ type: 'lang', function(text) {
return text.replace(/\\#/g, '#');
}}
];
}
Produces an error Uncaught SyntaxError: Unexpected token (
I would like to create an extension like this one https://github.com/rennat/python-markdown-oembed to interpret a , but it's unclear how to begin adding this support.
In your last block you have a comma after 'lang', followed immediately with a function. This is not valid json.
EDIT
It appears that the readme was incorrect. I had to to pass an array with the string 'twitter'.
var converter = new Showdown.converter({extensions: ['twitter']});
converter.makeHtml('whatever #meandave2020');
// output "<p>whatever #meandave2020</p>"
I submitted a pull request to update this.
The way we write extensions has changed, I found some help with the following filter example : http://codepen.io/tivie/pen/eNqOzP
showdown.extension("example", function() {
'use strict';
return [
{
type: 'lang',
filter: function(text, converter, options) {
var mainRegex = new RegExp("(^[ \t]*:>[ \t]?.+\n(.+\n)*\n*)+", "gm");
text = text.replace(mainRegex, function(match, content) {
content = content.replace(/^([ \t]*):>([ \t])?/gm, "");
var foo = converter.makeHtml(content);
return '\n<blockquote class="foo">' + foo + '</blockquote>\n';
});
return text;
}
}
]
});
I want to use this fantastic Javascript Library on my little web project.
http://prettydiff.com/
I've downloaded PrettyDiff.js and ViewDiff.js
I've been researching on how to use it and I can't seem to find any examples on how to get the output for Javascript/Jquery
This is what I have so far.
<script xmlns="http://www.w3.org/1999/xhtml" type="application/javascript" src="prettydiff.js"></script>
<script xmlns="http://www.w3.org/1999/xhtml" type="application/javascript" src="diffview.js"></script>
<link xmlns="http://www.w3.org/1999/xhtml" href="diffview.css" media="all" rel="stylesheet" type="text/css" />
<script type="application/javascript">
$(document).ready(function () {
var pd = new prettydiff();
var dv = new diffview();
});
</script>
I have the two text areas and the button placed but I just don't seem to find the function to start the show.
Any documentation or code would be much appreciated.
Cheers
var str = "<html><body><h1>hello</h1></body><html>";
// Options can be viewed at:
// http://prettydiff.com/documentation.xhtml#function_properties
var options = {
source: str,
mode : "beautify", // beautify, diff, minify, parse
lang : "html",
wrap : 100,
inchar : "\t", // indent character
insize : 1 // number of indent characters per indent
}
var pd = prettydiff(options); // returns and array: [beautified, report]
var pretty = pd[0];
var report = pd[1];
console.log(pretty);
console.log(report);
Don't exactly know what you want to accomplish, but there are several examples on the site itself.
https://prettydiff.com/2/samples.xhtml
Also, documentation.
https://prettydiff.com/documentation.xhtml
I'm new in Jquery, I would like to have Jquery code to get the current page url and if the url contains certain string then load remote element.
example:
i have the page urls like this:
"http://......./Country/AU/result-search-to-buy"
"http://......./Country/CA/result-search-to-buy"
"http://......./Country/UK/result-search-to-buy"
the part "/Country/AU" is what I need to determine which page element I should load in, then if "AU" I load from "/state-loader.html .state-AU", if "CA" I load from "/state-loader.html .state-CA"
I have a builtin module "{module_pageaddress}" to get the value of the current page url, I just dont know the Jquery logic to let it work.
I expect something like this:
if {module_pageaddress} contains "/Country/AU/"
$('#MyDiv').load('state-loader.html .state-AU');
if {module_pageaddress} contains "/Country/CA/"
$('#MyDiv').load('state-loader.html .state-CA');
please help and many thanks.
Here is some code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery test page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
function stateURL() {
var startOfResult = '../../state-loader.html #state-';
var match = (/(?:\/Country\/)(AU|US|CA|UK)(?:\/)/).exec(window.location.pathname);
if (match) {
return startOfResult + match[1];
} else {
return startOfResult + 'AU';
}
}
</script>
</head>
<body>
Link 1
<div id="content">content will be loaded here</div>
</body>
</html>
And the file to load the different content for the states:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="state-US">Go USA!</div>
<div id="state-CA">Go Canada!</div>
<div id="state-AU">Go Australia!</div>
<div id="state-UK">Go United Kingdom!</div>
</body>
</html>
See it work here:
http://www.quirkscode.com/flat/forumPosts/loadElementContents/Country/US/loadElementContents.html
Replace .../US/... with .../AU/..., etc. to see how it behaves.
Original post where I got the ideas/original code:
http://frinity.blogspot.com/2008/06/load-remote-content-into-div-element.html
You can try
var countryCode = ... // parse the country code from your module
$('#yourDiv').load('state-loader.html .state-' + countryCode);
See more examples of .load() here.
As far as pulling the url path you can do the following
var path_raw = document.location.path,
path_array = path_raw.split("/");
Then, you could do something like this:
$.ajax({
url: "./remote_data.php?country=" + path_array[0] + "&state=" + path_array[1],
type: "GET",
dataType: "JSON",
cache: false,
success: function(data){
// update all your elements on the page with the data you just grabbed
}
});
Use my one line javascript function for getting an array of the URL segments: http://joshkoberstein.com/blog/2012/09/get-url-segments-with-javascript
Then, define the variable $countrySegment to be the segment number that the country code is in.
For example:
/segment1/segment2/CA/
(country code would be segment 3)
Then, check if the 3rd array index is set and if said index is either 'CA' or 'AU'. If so, proceed with the load, substituting in the country-code segment into the .html filename
function getSegments(){
return location.pathname.split('/').filter(function(e){return e});
}
//set what segment the country code is in
$countrySegment = 3;
//get the segments
$segments = getSegments();
//check if segment is set
//and if segment is either 'AU' or 'CA'
if(typeof $segments[$countrySegment-1] !==undefined && ($segments[$countrySegment-1] == 'AU' || $segments[$countrySegment-1] == 'CA')){
$countryCode = $segments[$countrySegment-1];
$('#target').load('state-loader.html .state-' + $countryCode);
}
var result= window.location.pathname.match(/\/Country\/([A-Z]+)\//);
if(result){
$('#MyDiv').load('state-loader.html .state-' + result[1]);
}