Is there an easy way to convert the output of Excel 2003's Save to HTML option to something more 'friendly'? I have an Excel document with about 20 columns and 50 rows.
Throughout the saved HTML file I have obsolete HTML (example: <table x:str border=0 cellpadding=0 cellspacing=0 width=1366 style='border-collapse:
collapse;table-layout:fixed;width:1025pt'>), in line styles, and empty cells all over the place.
I'd like something less 'table-y'. Is there a way to either force Excel 2003 to save it using more CSS and less tables or a way to convert tables to divs more easily than going through the HTML file by hand?
If still of interest, Tidy shall neatly do the task in hand!
It seems to be somewhat without support so expect to find some troubles to make it useful for your needs.
Anyway, for POC you can rely on a on-line version found at http://infohound.net/tidy/.
Just checking the 'Clean' option leaving everything as-is would lead to a result close to your expectations.
Regards and good luck.
If you have Dreamweaver, you can use its markup cleaner tool...which I believe is designed for this kind of thing.
Create a new HTML document in Dreamweaver, copy and paste your code in and use the cleanup tool.
Here's one guide I find, but you could probably find better if it doesn't help:
http://www.articleonlinedirectory.com/656381/cleaning-up-unwanted-formatting-dreamweaver.html
Good luck.
Open the html file in browser and run some code in console is a way, a rough example:
var whiteList = ["rowspan", "colspan"];
[...document.querySelectorAll("table")].forEach(table => {
rmAttr(table);
[...table.querySelectorAll("tr")].forEach(tr => {
rmAttr(tr);
[...tr.querySelectorAll("td")].forEach(td => {
rmAttr(td);
});
});
console.log(table.outerHTML);
});
function rmAttr(dom) {
[...dom.attributes].forEach(attr => {
if (!~whiteList.indexOf(attr.name)) {
dom.removeAttribute(attr.name);
}
});
}
Related
guys
I'm building the web based code editor for my personal project.I want to make it work like VS code but facing some issues.
I'm using ACE editor.
This is what I get while trying with autocompletion.
I'm getting all the available suggestions while trying to write "os.(something)", rather then just getting the language and package specific suggestions.
What I want is this.
In this pic as you can see I'm getting suggetion related to os package only.
Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page. You need to write this simple script to working with the auto completion feature.
ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
enableBasicAutocompletion: true
});
Demo: https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html
Reference: https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor
HTML, JS, CSS Based
Create <textarea onkeyup=compile() id=code>. It should be big enaugt for code.
Create <script> </script>
Build the autocomplete
Script: function compile() { document.GetElementById('code').value = document.GetElementById('code').value.replaceAll('snippet1', 'Snippet1Value').replaceAll('snippet2', 'SnippetValue'). ...
E.g.: When you enter _text_ (and you set snippet1 to <input type=text>) then your textarea will write <input type=text>. To create an picker, use a contextmenu-library at json.
I know, this is only an plan how to do is.
I realize that normally when you describe some code (in a GitBook or anywhere else):
var foo = bar();
you don't want to add links to it. However, for some documentation I'm writing it would be really great if I could somehow add a link inside the code:
var foo = bar(); // "bar" links to a page describing bar
Is there any way to achieve this, possibly using a GitBook plug-in, HTML instead of Markdown, or some other inconvenient technique?
I found a "poor man's" solution to the problem, but if there are any better ones I'd love to hear them.
Essentially Markdown just converts indented code in to:
<pre><code>*the code*</code></pre>
Inside a <code> tag <a> tags (links) won't work, but they do work inside a <pre>, and a <pre> by itself almost looks like code block. Of course you don't get the syntax coloring with this approach, but at least it does offer a way to add links to code examples.
I have been working with Vaadin charts during this week and I found a problem that I cannot solve. I need to send several charts to a PDF generation (using iTextpdf) and I could do it using SVGGenerator. The main problem is I cannot use this solution because the final laptop doesn't allow any installation, and Phantomjs is required for SVG Generator (no add-on can be installed neither). I tried to find a different solution to convert the chart content into file or buffer that I can manage, but I think I have been reading so much posts and I am not able to distinguish the solution.
So, I will try to clarify basic questions first:
a) Is it possible to manage SVG Generator without any installation in the laptop?
b) If not, is there a different way to convert a chart into an object which class could be managed to insert it into a PDF?
I can assure you I tried to read all documentation in this forum and official Vaadin forum related to this topic but I couldn't find any solution. I don't want to seem lazy, I only want to avoid spending more time and clarify the maining pre-conditions to solve this issue.
thanks in advance for your time and help.
Kind regards,
David.
You can take a screenshot of your chart and append it to pdf:
Screenshot screenshot = new Screenshot();
screenshot.setTargetComponent(myTargetComponent);
myChartLayout.addComponent(screenshot);
//when complete
screenshot.addScreenshotListener(new ScreenshotListener() {
public void screenshotComplete(ScreenshotImage image) {
//do something
}
});
//take screenshot
screenshot.takeScreenshot();
You will not be able to render a Vaadin Chart without a web browser engine of some kind. That's what PhantomJS provides. If you have a full-blown web browser at your disposal, though, you can grab the SVG markup manually from there; it's just a bit more difficult to automate. This works in Chrome:
Open your Charts app in the browser
Open the JavaScript console (Ctrl/Cmd + Shift + J)
Type something like this: copy(document.getElementsByTagName('svg')[0].outerHTML)
Paste the contents of your clipboard to a new text file and save it as an SVG.
You don't need to install phantomjs, just bundle its binary along with your web application (Reference). I did the same thing with my Amazon AWS deployment and it works just fine.
Is there a way to set Modx Revolution to output HTML <br>s using the :nlb2r output filter rather than XHTML <br />s through a system setting?
Just create custom snippet - http://rtfm.modx.com/display/revolution20/Input+and+Output+Filters+%28Output+Modifiers%29 , as example:
<?php
$mode = !empty($options) ? true : false;
return nl2br($input, $mode);
This filter does not depend on the system settings, he is located in the code modx- https://github.com/modxcms/revolution/blob/develop/core/model/modx/filters/modoutputfilter.class.php#L431 so you need to create custom snippet.
Output filters are hard coded.
You could always:
SomeElement:nl2br:replace=`<br />==<br>`
Not really sure you want to drop the / as HTML5 simply ignores it. But any case, replace will serve you well.
Check out chapter 7 of my book, it has all of the filters and examples on how to chain them.
You should avoid using snippets and filters are much as you can. They increase the parsing-time.
There's a setting for what you ask
Search for tiny.element_format and change it to html.
I am running an experiment in which we are trying to train people to be synaesthetes (they have additional experience of colour associated with numbers or letters).
I wondered if anyone has some advise about the easiest way to modify a web browser, such as firefox, so that just 10 letters A-J would always be displayed in a specific colour on any page they visited on the web?
Much appreciated
There are many ways to do this (cross-browser):
For example you could define a -element in a stylesheet to have a different color.
When loading the document, you check via JavaScript/jQuery the whole document (but only the contents of tags like ) for your specified letters and add the -tag f.e. around them.
Not the best solution, but a way.
Take a look at Greasemonkey, a FireFox plug-in designed to do this kind of thing. There are lots of pre-made scripts available at http://userscripts.org/, and several of them look like they'd help you figure out how to write your own to re-color single letters.
Here is just an abstract rough draft of a blueprinted preliminary form of a beta version of a potential solution: using the javascript: prefix of links in a bookmark as follow.
Create a new entry in your bookmarks toolbar
In the URL input, copy/paste the following line: javascript:var html = document.body.innerHTML; html = html.replace(/([a-j])/ig, '<span style="color: red;">$1</span>'); while(html.match(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g) != null) {html = html.replace(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g, '$1$2$3');} document.body.innerHTML = html;
Give your bookmark a name (e.g. "A-J to red") and save
You can now visit any website and click on that bookmark, which will put all letters between a and j in red
In a more digest way:
// get the content of the body
var html = document.body.innerHTML;
// surround any letter between a and j by a <span></span>
html = html.replace(/([a-j])/ig, '<span style="color: red;">$1</span>');
// but it also replaces a-j letters within html tags
while(html.match(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g) != null) {
// so if there are html tags within other html tags, delete the created <span></span>
html = html.replace(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g, '$1$2$3');
}
// and replace the innerHTML of the body
document.body.innerHTML = html;
That's really not a final solution, but yeah, maybe you could work on it to improve the results.
PS: don't try with IE...