I'm having trouble getting the highlight function to execute when using Remarkable to highlight HTML code. I'm taking from the example here:
var md = new Remarkable({
html:true,
langPrefix:'lang-',
highlight: function (str, lang) {
alert('highlighting'); // never executes!
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (err) {}
}
try {
return hljs.highlightAuto(str).value;
} catch (err) {}
return ''; // use external default escaping
}
});
var test = md.render('<code class="lang-js">var x = 1;</code>');
See fiddle
Remarkable works when you give it text written in markdown, not HTML. It generates the HTML for you. If you wanted to write out the HTML yourself, you don't need Remarkable ;)
So, your test line should look like this:
var test = md.render('``` js\nvar x = 1;\n```\n');
(normally, text is pulled from a text area, so you don't need the "\n" in there, you would just hit enter)
Here is the working fiddle:
https://jsfiddle.net/fhz9oma1/7/
Related
Currently I am busy with parsers and tried ANTLR. I understand the grammar so far and now I wanted to implement it in javascript.
Here is a small but important snippet of my code.
if (selected == "Funktionen") {
console.log("You selected functions")
const chars = new antlr4.InputStream(data.stringToLex);
const lexer = new FunktionLexer(chars);
const tokens = new antlr4.CommonTokenStream(lexer);
const parser = new FunktionParser(tokens);
parser.buildParseTrees = true;
const tree = parser.start();
tree.accept(new Visitor());
}
My visitor looks like this
class Visitor {
visitChildren(ctx) {
if (!ctx) {
return;
}
if (ctx.children) {
return ctx.children.map(child => {
if (child.children && child.children.length != 0) {
return child.accept(this);
} else {
return child.getText();
}
});
}
}
}
I have oriented myself to this tutorial and everything works.
https://github.com/antlr/antlr4/blob/master/doc/javascript-target.md
http://lab.antlr.org/ Just hit on start and u will see what I mean.
The object of my tree I get back from my start() function with a right input looks like this:
The big problem is, I want to get the Tree and output it (at least in console log), like on the official ANTLR lab website.
The big problem is, I want to get the Tree and output it
The object returned by parser.start() is the tree of your parsed input. You don't need a visitor for this.
What you mean by "and output it", I do not know. Just print it to your console? That can be done by doing:
const tree = parser.start();
console.log(tree.toStringTree(parser));
// or if the line above doesn't work, try:
// console.log(tree.toStringTree());
I've been able to sort out the middle bit (the API seems to be called to just fine) along with the submenu displaying. Originally I thought that just the end part wasn't working but I'm now thinking that the selection part isn't either.
What am I doing wrong with the getSelection() and what do I need to do to insert a link into said selection? (to clarify, not to replace the text with a link, but to insert a link into the text)
//Open trigger to get menu
function onOpen(e) {
DocumentApp.getUi().createAddonMenu()
.addItem('Scry', 'serumVisions')
.addToUi();
}
//Installation trigger
function onInstall(e) {
onOpen(e);
}
//I'm not sure if I need to do this but in case; declare var elements first
var elements
// Get selected text (not working)
function getSelectedText() {
const selection = DocumentApp.getActiveDocument().getSelection();
if (selection) {
var elements = selection.getRangeElements();
Logger.log(elements);
} else {
var elements = "Lack of selection"
Logger.log("Lack of selection");
}
}
//Test run
// insert here
// Search Function
function searchFunction(nameTag) {
// API call + inserted Value
let URL = "https://api.scryfall.com/cards/named?exact=" + nameTag;
// Grabbing response
let response = UrlFetchApp.fetch(URL, {muteHttpExceptions: true});
let json = response.getContentText();
// Translation
let data = JSON.parse(json);
// Jackpot
let link = data.scryfall_uri;
// Output
Logger.log(link);
}
// Test run
searchFunction("Lightning Bolt");
//Let's hope this works how I think it works
function serumVisions() {
const hostText = getSelectedText();
const linkage = searchFunction(hostText);
// Unsure what class I'm supposed to use, this doesn't
const insertLink = DocumentApp.getActiveDocument().getSelection().newRichTextValue()
.setLinkUrl(linkage);
Logger.log(linkage);
}
For the first part, I tried the getSelection() and getCursor() examples from the Google documentation but they don't seem to work, they all just keep returning null.
For the inserting link bit, I read all those classes from the Spreadsheet section of the documentation, at the time I was unaware but now knowing, I haven't been able to find a version of the same task for Google Docs. Maybe it works but I'm writing it wrong as well, idk.
Modification points:
In your script, the functions of getSelectedText() and searchFunction(nameTag) return no values. I think that this might be the reason for your current issue of they all just keep returning null..
elements of var elements = selection.getRangeElements(); is not text data.
DocumentApp.getActiveDocument().getSelection() has no method of newRichTextValue().
In the case of searchFunction("Lightning Bolt");, when the script is run, this function is always run. Please be careful about this.
When these points are reflected in your script, how about the following modification?
Modified script:
Please remove searchFunction("Lightning Bolt");. And, in this case, var elements is not used. Please be careful about this.
From your script, I guessed that in your situation, you might have wanted to run serumVisions(). And also, I thought that you might have wanted to run the individual function. So, I modified your script as follows.
function getSelectedText() {
const selection = DocumentApp.getActiveDocument().getSelection();
var text = "";
if (selection) {
text = selection.getRangeElements()[0].getElement().asText().getText().trim();
Logger.log(text);
} else {
text = "Lack of selection"
Logger.log("Lack of selection");
}
return text;
}
function searchFunction(nameTag) {
let URL = "https://api.scryfall.com/cards/named?exact=" + encodeURIComponent(nameTag);
let response = UrlFetchApp.fetch(URL, { muteHttpExceptions: true });
let json = response.getContentText();
let data = JSON.parse(json);
let link = data.scryfall_uri;
Logger.log(link);
return link;
}
// Please run this function.
function serumVisions() {
const hostText = getSelectedText();
const linkage = searchFunction(hostText);
if (linkage) {
Logger.log(linkage);
DocumentApp.getActiveDocument().getSelection().getRangeElements()[0].getElement().asText().editAsText().setLinkUrl(linkage);
}
}
When you select the text of "Lightning Bolt" in the Google Document and run the function serumVisions(), the text of Lightning Bolt is retrieved, and the URL like https://scryfall.com/card/2x2/117/lightning-bolt?utm_source=api is retrieved. And, this link is set to the selected text of "Lightning Bolt".
Reference:
getSelection()
Apologies - new to Javascript and Office.js But it's time to convert my .NET formatting ribbons over to be cross platform. A bit of a learning curve.
I use this function that I found the Addin tutorial, to successfully apply a paragraph style, but I've tried tweaking it (see below) and they while I have learned that it's important to completely shut down the addin, exit out of word and go back in and reload before testing changes (very tedious), it still applies to character style to the entire paragraph. Grr
function applyemphasisstyle() {
Word.run(function (context) {
var pars = context.document.getSelection().paragraphs;
pars.load();
return context.sync().then(function () {
for (var i = 0; i < pars.items.length; i++) {
pars.items[i].style = "Emphasis";
}
return context.sync();
})
}) //needed for Stack overflow
.catch(function (error) {
console.log("Error: " + error);
if (error instanceof OfficeExtension.Error) {
console.log("Debug info: " + JSON.stringify(error.debugInfo));
}
});
}
I've tried changing:
var pars = context.document.getSelection().paragraphs;
to
var pars = context.document.getSelection().getTextRanges;
I've tried just removing ".paragraphs"
I've tried changing ".paragraphs" to ".words" etc
same result - applies the style, but the entire paragraph, not the selected word.
Thanks for any help you can provide!
This code works for me. Since you are selecting a single word, there's nothing to loop through and since you are writing to the style property, instead of reading it, there's no need to load the text object.
return Word.run(function(context) {
var selectedText = context.document.getSelection();
return context.sync()
.then(function () {
selectedText.style = "Emphasis";
})
});
I recommend that you use the Script Lab tool to work out the logic of your script.
I have multiple javascript files in a folder and I want to make sure that every file has comment in the beginning (that will explain the summary of file).
/*
This file will......
*/
function test () {
....
}
So is this possible using gulp-contains or something else?
I think this would be enough just to make sure if start of a file is the comment initial characters (/*)
gulp.src('./file.js')
.pipe(map(function(file, callback) {
var startWithComment = file.contents.toString().replace(/\n|\r/g, "").trim().startsWith("/*");
if (startWithComment){
// DO YOUR CHORES
}
}))
Another approach is to split the initial text to make sure if it is a valid multi-line comment.
function startsWithValidMultiLineComment(str){
try{
return str.replace(/\n|\r/g, "").trim().split("/*")[1].split("*/")[1].length > 0
} catch (e){
return false;
}
}
Following this approach str.split("/*")[1].split("*/")[0] would be your comment text
By using the regex provided by #Sajjad in previous answer. I have managed to achieve my goal. I have used gulp-if and gulp-fail instead (I find it more flexible).
Here is how I do that:
var condition = function (file) {
sFile = require('path').parse(file.path).name;
var startWithComment = file.contents.toString().replace(/\n|\r/g, "").trim().startsWith("/*");
return (!startWithComment);
}
gulp.task('taskName',
function() {
gulp.src('files/*.js')
.pipe(gulpIf(condition, fail(function () {
var message = 'Some message';
return message;
})));
});
I am trying to use node.io on node.js to parse a HTML page which i have as a string in a variable.
I am facing trouble with passing the HTML string to my node.io job as an argument.
This is an excerpt of my code at my node file nodeiotest.js:
var nodeIOJob = require('./nodeiojobfile.js');
var nodeio = require('node.io');
vat htmlString = 'HTML String Here';
nodeio.start(nodeIOJob.job, function(err, output) {
console.log(output);
}, true);
The next is an excerpt of my file nodeiojobfile.js:
var nodeio = require('node.io');
var methods = {
input: ['xxxxxxxxxxxxxxxx'], // htmlString is suppossed to come here
run: function (num) {
console.log(num);
this.emit('Hello World!');
}
}
exports.job = new nodeio.Job(methods);
How do I send my htmlString as argument to my job in the other file?
Also, after receiving the file i need to parse it as an HTML and perform some basic CSS selection (ex. getElementById() etc.) and need to calculate offsetHeight of certain HTML elements. The documentation says I can use get() and getHTML() methods to parse a URL's html but what about HTML in a string? How do I parse them?
For testing purposes I am using he following HTML:
<div>
<p id="p1">
Testing document
</p>
</div>
I am trying to select the <p> and then find out its height.
Can anyone help me?
Thnx in advance!!
I'm not familiar with node.io, but I think you want something like this:
// nodeiotest.js
...
var htmlString = 'HTML String Here';
nodeio.start(nodeIOJob.job(htmlString), function(err, output) {
console.log(output);
}, true);
// nodeiojobfile.js
var nodeio = require('node.io');
module.exports.job = function(htmlString) {
var methods = {
input: [ htmlString ],
run : function (num) {
console.log(num);
this.emit('Hello World!');
}
};
return new nodeio.Job(methods);
};