I want to create a plugin for vs-code that adds custom highlight to js:
const t = () => {
return "<div class="test"><a>Hello</a></div>"
}
I want the HTML section to be highlight just like html and the js section the be highlight just like js. Is there a way to set specific highlight for specific secitions of the code in monaco?
Just like this but with quotations
Thanks for helping :)
Related
I am rendering an ASCII map that looks like the following:.
I want the asterisk in the map, which represents a character, to be red. Right now this characters asterisk is being assigned to its location as follows:
def mark_character_coordinates
WORLD.terrain[#character.y_coordinate][#character.x_coordinate][0][0] = "*"
end
I want my characters location on the map (the asterisk) to render as red. My idea is to try to wrap the asterisk in a span and give it an id. Then go into my CSS and make ID color red. My problem is I am not sure how to insert ERB into the model and have it render as such in the view. After reading similar problems on stackoverflow, this is the closest I got:
def mark_character_coordinates
WORLD.terrain[#character.y_coordinate][#character.x_coordinate][0][0]
= ERB.new("<span>*</span>")
end
What should I do? How do I insert ERB into a variable in the model and have it render accordingly in the view?
The best and easiest way to do this is to use JQuery. First, put the ASCII map inside a div with id="ascii-map" in your template. Then switch to the front-end. Once the DOM is fully loaded, you can parse the ASCII map, look for the asterisk, and then wrap it in a span element that has red color defined for its font.
In your CSS:
.red-font {
color: red;
}
Then, some JQuery:
$(document).ready(function() {
var text = $('#ascii-map').html();
var textWithRed = text.replace("*", "<span class='red-font'>*</span>");
$('#ascii-map').html(textWithRed);
});
I test this and confirmed that it works.
Well... you're breaking MVC pretty badly, so that's one thing. Other than that though, do you need ERB for this? You're not embedding ruby at all. Why not just have it as a string?
i.e
def mark_character_coordinates
WORLD.terrain[#character.y_coordinate][#character.x_coordinate][0][0] = "<span>*</span>"
end
I am using Shield ASP.NET MVC charts on a page. I need the charts to initially show data for my visitors, and I need to provide the user the possibility to hide the charts by clicking on the corresponding button(s). For this purpose I use the following function:
<script>
function HideChart() {
document.getElementById("DataSpot").innerHTML = "";
}
</script>
And I am placing the charts as follows:
<p id="DataSpot">
#(Html.ShieldChart()
.Name("chart")
.PrimaryHeader(header => header.Text("Profile Hits"))
.Export(false)
.AxisX(axisX => axisX
………..
)
</p>
<button onclick="HideChart()">Hide Chart</button>
The problem is, that when I click on the button, nothing happens.
#user2492467,
Do you need to hide the chart or do you need to wipe out its content? If just hiding the chart, the approach suggested by Chris would work just fine. However, if you need to irrevocably wipe out the chart from the page altogether, then clearing its content is not enough. Only removing the rendered chart markup would open the door for memory leaks, as references to the DOM nodes may remain in the chart javascript component.
A better approach would be to find the javascript component instance and call its .destroy() method. This will ensure the component is fully destroyed and no memory is leaked:
$("#DataSpot").swidget().destroy();
Note that you still need to give your chart a name using the MVC wrapper's .Name("DataSpot") method just like Ed suggests. This will give your chart's HTML element an ID that you can use with jQuery to find the chart instance.
The .swidget() method is a standard jQuery extension method added by the Shield UI javascript framework. It returns the javascript component instance associated with the element matched by the jQuery selector. This is how you find the chart instance.
How about:
<script>
function HideChart() {
document.getElementById('DataSpot').style.display='none';
}
</script>
You should also update your button:
<button type="button" onclick="HideChart()" value="Hide Chart" />
Actually there is something happening, obviously not the thing that you need. This is because you need to wipe out the rendered chart by referencing its container.
The element is fine and if you put some text in your function and execute it you will see that it will appear on the appropriate spot. However to hide the chart you need to use it’s name. In other words the following statement:
document.getElementById("DataSpot").innerHTML = "";
should be changed to
document.getElementById("chart").innerHTML = "";
or you may rename the chart to
.Name("DataSpot ")
and remove the P element in both cases since it makes no use.
Is there any example out there that explains how to dynamically generate a tablesorter with the pager plugin using AJAX, with checkboxes and editable cells? Currently, all of the examples have hard-coded table data, i.e. <theader> and <tbody> are pre-defined.
I can get a basic example up and running with AJAX calls to fetch paginated data, but need to integrate checkboxes into the table.
Also, is it possible to group rows (and expand collapse them) using this plugin?
Here's a screenshot of what I'm trying to accomplish:
Much thanks in advance !
The included parser-input-select.js parser file allows for dynamically added and updated inputs, checkboxes & select boxes. All you need to do is set the parser for that particular column:
Place this in the header
<script src="../js/parsers/parser-input-select.js"></script>
and include this code:
$(function(){
$("table").tablesorter({
theme : 'blue',
headers: {
0: { sorter: 'checkbox' },
1: { sorter: 'inputs' }
}
});
});
This parser will also work with the pager addon. There isn't a demo of this parser being used with the pager, but you can see it working in the grouping rows widget demo.
I'm using rails and have a markItUp editor in place, using the Markdown custom set. The only thing I can't figure out is how to get it to submit raw Markdown instead of converted html. I plan on storing both formats, but I haven't found anything capable of parsing html back to markdown. I've customized the markdown set set.js as we didn't want the entire set of formatting options. Here:
myMarkdownSettings = {
previewParserPath: '',
onShiftEnter: {keepDefault:false, openWith:'\n\n'},
markupSet: [
{name:'Bold', key:'B', openWith:'**', closeWith:'**'},
{name:'Italic', key:'I', openWith:'_', closeWith:'_'},
{name:'Bulleted List', openWith:'- ' },
{name:'Link', key:'L', openWith:'[', closeWith:']([![Url:!:http://]!] "[![Title]!]")', placeHolder:'Your text to link here...' }
]
}
And here's the onready code for the page where the markitup elements appear:
$.editable.addInputType('markitup', {
element : $.editable.types.textarea.element,
plugin : function(myMarkdownSettings, original) {
$('textarea', this).markItUp(myMarkdownSettings);
}
});
$('.editable').editable({type : 'markitup'});
This works, but it submits as html. I was trying to use wmd as there's an option for output which maintains the markdown text as is, but haven't been able to get that to fly. Thanks.
Assuming the textarea contains markdown formatted text, you should be able to grab the contents before form submit with $('.editable').text(), and store it in another hidden field, but you'd have to ensure that you get to the contents before markitup transforms them.
If you really just want to store markdown, you'd be better not to use markitup, and just leave it as simple markdown in a text view, then translate it yourself to html for display with one of the libraries available like rdiscount etc.
I am playing around with using the WMD Editor (http://wmd-editor.com/) in my site. I have a really simple question. When I am ready to submit the text to the server; how do I get the output of the editor?
Something like this only returns the 'actual text that user typed in the textarea'
var jtext = document.getElementById('myTextarea').value;
I would like to get the 'output' of the editor; but I can't figure out how to do that :(
By output; I mean the 'Markdown' or 'Html' output.
You will need to use javascript to get the contents of the preview div. Based on the demo on the wmd site, the div in question has the class wmd-preview. Not sure why it's not id'd.
In jQuery, you'd use something like:
$('#formname').submit(function() {
$('#hidden_form_element').val($('.wmd-preview').html());
return true;
});
I believe you can simply make a textarea with the id="wmd-output", it should allows you to submit the output code