I need a syntax highlighter which inputs a code sample and wrap its language tokens in some html element with some color CSS class. This way with only CSS and HTML syntax highlighting will work without the need of JS. I want the code to appear in an EPUB file and cause my reader (Kindle PaperWhite) does not support JS, i have to highlight my code only with HTML and CSS. My preferable programming environment is JS and Python but if there is such a syntax highligher in another language I will be glad to hear about it.
I used Ace.js on a few projects. The trick is to embed the page using some sort of iframe or the EPUB equivalent. It looks like you can embed an iframe in a kindle (just search iframe)
Related
I would like to develop a Javascript code which would get data from a Web Service and render html for displaying details.
Users need to just place this Javascript on any page on their Website to use this feature.
The problem I will face is that the html generated by my Javascript will have a different CSS to that of the Website which is using my Javascript. Is there any way that the html generated by my Javascript would inherit the CSS of the Website where my Javascript is being used.
If you are creating a script to run on any websites, you should expect the developer of that website to work on the styling of your generated HTML. Just simply display the HTML there, maybe with basic class names and styles.
A lot of cookie legals displaying that way on multiple websites.
Example: https://policy.app.cookieinformation.com/6f7f86/cubiscan.dk/declaration-da.js
That script is to put on any websites, to display few tables of cookie usage information.
If you want to overwrite their CSS, use iframe or inline styles, inline CSS.
I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.
I've seen videos by John Lindquist using WebStorm to edit inline HTML in JavaScript files. He opens a special window where he edits the inline HTML as if it weren't inlined.
I tried to find a video where he does that but I couldn't.
How does he do that in WebStorm?
In the HTML fragment in your JS code tap Alt+Enter and select Edit HTML fragment.
Sorry for the basic question, I'm a beginner with some basic knowledge of html, css and beginning with javascript that I'm learning for developing my own web project. I'm trying to create a project with a separate page for functions to keep the page cleaner and see all the functions in one place. I'm watching videos as part of an online course. However, the lectures use Visual Studio in which you can drag and drop the files so that the source link is already coded. If there's an equivalent feature, let me know please.
I know that you are supposed to link the <script type = "text/javascript" script src = XXXX.js> However, whenever I copy the file path, it still doesn't come up. What am I missing?
This should be the text that links your JS file:
<script type="text/javascript" src="path/to/file.js"></script>
Even though with HTML5 you might not need quotes around your attribute content, it's safe to put them in for older browsers. Don't put a space between the attribute name and the equals sign, or between the attribute content and the equals sign. There shouldn't be a script in the middle of your tag (you put one before src). Make sure the file path is relative to your HTML file as well.
I'm using the WYSIHTML5 editor: http://xing.github.io/wysihtml5/
This editor adds an iFrame to the page and updates a textarea whenever you make a change to the iFrame's contenteditable body. It's similar to many other WYSIWYG editors, so my issue should apply to other editors.
My issue is I want to be able to edit <html>, <head>, <body> and other important base tags through this editor. You obviously can't edit them in WYSIWYG mode, so raw code mode would be fine.
When I enable these tags, they are stripped out by the browser itself because those tags have already been opened by the page in the iFrame itself. So when I switch between raw code and WYSIWYG modes, they are lost.
I use the default "advanced" parser rules and merge them with these: http://pastebin.com/6QvYkqm4 with jQuery's recursive $.merge().
How can I get around this but still use this plugin? Have I misconfigured the plugin? I'm sure I've enabled the tags in the parser rules.
I highly recommend you use as JQuert TE WYSIHTML textarea editor though even it it is buggy, but compared to many others its alot better.
The JavaScript libraries with which WYSIHTML editors are built with search for those tags and deletes them because it's a security flaw not to, and it will probably warp a site layout if its left in. Imagine if a user changes the page's headers. If you really want to implement those feature I would suggest you find the code that deletes those tags in WYSIHTML5's library and alter it to not recognize the those specific tags. Good luck.
Edit:
Example:
In the folder parser_rules of WYSIHTML5 select advanced.js or basic.js (depends what you are using) find:
"head": {
"remove": 1
},
replace with:
"head": {
"rename_tag": "head"
},
Repeat this process with different rules that until you have a desired rule set. WYSIWYG textarea editors all have different JavaScript librarys but the one your using is simple enough to edit.
A WYSIWYG editor is not the solution you're looking for since you can't "see" (format with styles) the head or markup of a page. You should take a look at http://codemirror.net/
HTML example page