highlight.js
Javascript syntax highlighter
highlight.js
I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.
So I have something like this:
<pre><code>
def python_function()
<span class="fragment">display this first</span>
<span class="fragment">now display this</span>
</code></pre>
But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS
FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.
Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.
Source: (StackOverflow)
I'm trying to use the syntax highlighting for a presentation in reveal.js, but I don't want to use zenburn (the default) and I want to highlight code written in R. I used highlight.js to produce css customized for R but the issue is that highlight.js denotes code in html with 'hljs' while reveal.js uses 'pre code.' For example highlight.js css looks like:
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #fdf6e3;
color: #657b83;
-webkit-text-size-adjust: none;
}
While reveal.js highlighting css looks like:
pre code {
display: block; padding: 0.5em;
background: #3F3F3F;
color: #DCDCDC;
}
Can reveal generate alternate themes for syntax highlighting, or is the solution to go through and change all the selectors?
Source: (StackOverflow)
I'm having trouble formatting my output. I want each line of text to be horizontal on the left side. Here is the code I am using.
<div style="text-align: left;">
<pre style="width: 75%; margin-left:auto; margin-right:auto;"><code class="sql">
<c:out value="${snippet.query}"/>
</code></pre>
</div>
Although the styling calls for the text to be aligned to the left of the div, the first line of output is always indented. Why is this happening? I can't post images yet, but this is what it looks like:
CREATE SCHEMA "Trading";
SET SCHEMA '"Trading"';
CREATE STREAM "Orders"
(
orderTime TIMESTAMP,
orderId INTEGER,
productId INTEGER,
quantity INTEGER,
unitPrice DECIMAL(11,2),
shippingState CHAR(2)
);
CREATE STREAM Shipments
(
shipTime TIMESTAMP,
orderId INTEGER,
warehouseState CHAR(2)
);
I notice that if I remove the 'pre' tags I no longer have this issue, but without those tags proper text highlighting does not occur. I'm passing the variable snippet to the jsp like this:
request.setAttribute("snippet", selectedQuery);
I've tested what this data looks like prior to sending it to the jsp. I observed the variable in System.out.print() and there is NO indentation on the String itself. selectedQuery is an object that holds several String variables.
Thank you for your help.
edit: I've tried using text-indent in the div, pre, and code tags but none of those had any effect.
Source: (StackOverflow)
So i have been struggeling to use highlight.js in a text area since obviously this doesn't work:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" rel='nofollow' href="styles/default.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<form>
JavaScript Injection: <br>
<pre>
<code>
<textarea name="js_execute" cols="50" rows="10" "></textarea>
</code>
</pre>
<input type="button" name="Inject_Execute_Button" value = "Inject" onclick="executeJS()" >
</form>
<script type="text/javascript">
function executeJS()
{
alert("Wohoo");
}
</script>
<style type ="text/css">
</style>
</body>
</html>
I'm pretty sure there's an easy answer to this so i won't explain it in too detail but at the end i would prefer to have code typed into the textarea highlighted in JavaScript.
Source: (StackOverflow)
Here is the HTML, pretty straight forward:
<script>hljs.initHighlightingOnLoad();</script>
<div class="container">
<section>
<pre>
<code>
function() {
console.log("test");
}
</code>
</pre>
</section>
</div>
And I tried some CSS, but it didn't change anything:
code {
text-align: left;
}
pre {
padding-top: 0;
padding-bottom: 0;
}
You can see how it looks like in this fiddle. I want the code on the left, and what is up that giant padding between the top <pre> and <code>?
Thanks!
UPDATE: Here is a working version, although the HTML doesn't look too good. Does anyone have a better idea?
Source: (StackOverflow)
I am attempting to display dynamically generated HTML on my web page and do highlighting/formatting using highlight.js. I have the highlighting working correctly, however the indentation is not correct. Here's the jsFiddle.
The code shows like this:
<div class="parent">parentContent<div class="child">childContent</div><div class="child">childContent</div><div class="child">childContent</div></div>
whereas I'd like to show up as it would in an IDE:
<div class="parent">
parentContent
<div class="child">
childContent
</div>
<div class="child">
childContent
</div>
<div class="child">
childContent
</div>
</div>
I understand it's called highlight.js not format.js :) but I thought it was possible and I haven't had much luck getting an answer from the API. I have tried configuring line breaks via hljs.configure({ useBR: true }); and the fixMarkup('value') looked promising but I have not implemented it with any success.
Source: (StackOverflow)
I am using highlight.js and applying this code to initialise the syntax highlighting for my code snippets on a blog app.
The following code is on my index.html page :
<script>
$(document).on('ready page:load', function() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});
</script>
A code snippet should look like this originally:
<pre><code>A
B</code></pre>
And after applying the new style it turns into this:
<pre><code class=" hljs">A
B</code></pre>
The problem is that when I try to edit one of those posts on the edit.html page, in the editor I get the stylized version instead of the plain one, which I do not want. I want the new styles to be applied only to the index page. How can I make that happen?
I should mention I have generated a scaffold with all the included views: index, new, edit etc.
Also I have the jquery-turbolinks gem installed.
The problem goes this way: I load index.html and I get highlighted code. I navigate to edit.html and get highlighted code. I refresh the edit.html page and lose the highlight (which is how it should be).
--------------------------------------------EDIT-------------------------------------
Tried this and it did not work:
in my aplication.html.erb:
<body data-action="<%= action_name %>" data-controller="<%= controller_name %>">
in my index.html.erb
<script>
var data = $('body').data();
if (data.controller === 'posts' && data.action != 'edit'){
$(document).on('ready page:load', function() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});
};
</script>
Source: (StackOverflow)
I use angular-marked in my website. And I want highlight code in markdown. I read the Readme docs, in the set default options optional section, when I use the code in my project
markedProvider.setOptions({
gfm: true,
tables: true,
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
and I have added highlight.js and .css references, according the Highlight.js doc
but Jshint complain 'hljs' not defined. Please help me, how to fix this?
Source: (StackOverflow)
I'm trying to create language definition for highlight.js.
But it doesn't work. I've got an example.
In this example i'm trying to create custom "aaa" language, which is the same as JSON. registerLanguage function receives same function as a default JSON highlight function (from highlight.js sources).
hljs.listLanguages() shows, that language is registered.
After, i'm calling hljs.highlightBlock(block).
<code class="aaa"> forces to use custom "aaa" language, and in this case hljs.highlightBlock(block) doesn't changes content.
$(document).ready(function() {
// registering aaa language (JSON alias)
// code from https://github.com/isagalaev/highlight.js/blob/master/src/languages/json.js
hljs.registerLanguage("aaa", function(hljs) {
var LITERALS = {
literal: 'true false null'
};
var TYPES = [
hljs.QUOTE_STRING_MODE,
hljs.C_NUMBER_MODE
];
var VALUE_CONTAINER = {
className: 'value',
end: ',',
endsWithParent: true,
excludeEnd: true,
contains: TYPES,
keywords: LITERALS
};
var OBJECT = {
begin: '{',
end: '}',
contains: [{
className: 'attribute',
begin: '\\s*"',
end: '"\\s*:\\s*',
excludeBegin: true,
excludeEnd: true,
contains: [hljs.BACKSLASH_ESCAPE],
illegal: '\\n',
starts: VALUE_CONTAINER
}],
illegal: '\\S'
};
var ARRAY = {
begin: '\\[',
end: '\\]',
contains: [hljs.inherit(VALUE_CONTAINER, {
className: null
})], // inherit is also a workaround for a bug that makes shared modes with endsWithParent compile only the ending of one of the parents
illegal: '\\S'
};
TYPES.splice(TYPES.length, 0, OBJECT, ARRAY);
return {
contains: TYPES,
keywords: LITERALS,
illegal: '\\S'
};
});
console.log(hljs.listLanguages()); // aaa in the list
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
<link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<pre><code class="aaa">
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}
</code></pre>
Source: (StackOverflow)
I want to highlight my code. So I use simple:highlight.jsand markdownpackages. However only the first line will be highlighted and the rest of the code is shown as blank text outside <pre> tags.
TEMPLATE
<div class="card">
<p class="front">
{{#if cards.frontIsCode}}
{{#markdown}}
{{cards.front}}
{{/markdown}}
{{else}}
{{cards.front}}
{{/if}}
</p>
</div>
RENDERED HTML
<p class="front">
<pre><code class="hljs javascript"><span class="hljs-keyword">var</span> x = <span class="hljs-number">10</span>;
</code></pre>
<p>var y = z;
var func = function(block) {
return block * x;
}</p>
</p>
The object looks like this "front: "var x = 10;↵var y = z;↵var func = function(block) {↵return block * x;↵}""
The whole repo is here: https://github.com/mvaisanen/flashcards
Source: (StackOverflow)
whether it be ckeditor themes, or codesnippet themes, where are the actual string values to pass as arguments to the config options? I'm having trouble finding the actual string values, or something pointing to the convention/pattern the value follows.
The ckeditor documentation is huge, and the links send you around in circles, referring you to generic documentation pages, but either the actual string values for possible arguments are not available.
the one example for plugins follows all lower case, no separation between words.
the highlight js themes that ckeditor requires seems to be snake case, but some are inconsistent and not working.
For instance, I'm looking to find values for
<script>
CKEDITOR.replace( 'editor1', {
skin: 'kama',
codeSnippet_theme:'tomorrow_night_dark'
} );
</script>
Source: (StackOverflow)
I like to convert markdown files to pdf using gulp-markdown-pdf
My markdown file looks like this
### HTML
<script>
var v1;
var v2 = 'Hello, World';
var v3 = 50;
var v4 = new Date();
v4.setDate(v4.getDate() - 365);
console.log(v4);
</script>
### JavaScript
function hello() {
console.log('Hello');
}
This is my gulp task
gulp.task('pdf', function() {
gulp.src(paths.pdf.src)
.pipe($.markdownPdf({
cwd: __dirname,
cssPath: 'default.css',
highlightCssPath: 'github.css',
paperFormat: 'A4',
paperOrientation: 'portrait',
paperBorder: '2cm',
remarkable: {
}
}))
.pipe(gulp.dest(paths.pdf.dest));
});
I almost get what I want, except the pdf is not syntax highlighting, if this was just a web page all I need to do is using
<script src="js/highlight.pack.js"></script>
<script>
hljs.configure({
languages: ['javascript', 'html']
})
hljs.initHighlightingOnLoad();
</script>
I tried to look at markdown-pdf sourcecode, my understanding is that I should be able to configure to use highlight.js via remarkable: {} option, but I really don't know how to pass this parameter options because I have poor knowledge in node.js
Please guide
Thanks
Source: (StackOverflow)
I have generated static tiddlers with the command
generatetiddler
however the highlight.js is not working (which is expected I guess!?)
How can one "enable" syntax highlighting in static mode?
Source: (StackOverflow)
I use Highlight.js to highlight code on the webpage. It is interesting for me, is it possible to use different code highlight styles on the same page.
I can specify what language is used:
<pre><code class="html">...</code></pre>
Is it possible to specify the style the same way? For example:
<pre><code class="html solarized_dark">...</code></pre>
Thanks in advance!
Source: (StackOverflow)