I am trying to display an HTML string with inline CSS in flutter using the Flutter_Html package. But It is not styling my text according to my inline CSS, It just showing depending on the tags.
Here is my code
Html(
data: """<p>Hello <span style="color: #fbeeb8; background-color: #e03e2d;">World</span></p>""",
)
There are some other packages. You can try those.
simple_html_css
flutter_widget_from_html
Inline styles are not released yet for flutter_html, but will be soon (as discussed on this issue), but you may use master branch override if you already want to use it.
Related
I was wondering if it was possible to highlight code written using the HTML <code>...</code> tags in a similar fashion to the native markdown code block using the tripe backtick ```.
I prefer the <code>...</code> environment due to its ability to be customized using css, as I want code to stand out visually.
You can customise the styles of the code syntax-highlighted by triple backtick by wrapping it in a <div>:
<div style="font-weight: bold">
```javascript
var x = 1;
function y() {
return 0;
}
```
</div>
Note the extra new lines (otherwise it will not render properly). This works well in JupyterLab:
JupyterLab jupytext
This extension adds a few Jupytext commands to the command palette. You can use it to select the desired ipynb/text pairing for your notebook.
When I save content through django-tinymce it adds its own inline styles. However I'd like to remove this behaviour and just save the content in plain html. Can you please help me on this issue?
You can use any of tinyMCE configs like this:
Put this to your Django settings.py
(this will tell tinyMCE which elements are allowed`)
DJANGO settings.py
TINYMCE_DEFAULT_CONFIG = {
'theme': "advanced",
'valid_elements' : 'a[href|target=_blank],strong/b,div[align],br,p'
}
And push Clean Button in TinyMCE.
All TinyMCE configs is here:
Try also look at invalid_elements and invalid_styles
P.S. It would have more sense to set:
'invalid_elements': 'p[styles], span'
to remove all styles But It didn't work.
Hope it helps.
You could try writing your own implementation of a save function using
getContent({format: 'text'})
I'm no Djanjo expert but it sounds like the problem is being caused by them, and not TinyMCE itself.
I've been contributing to a WYSIWYG text editor that was made using HTML5 and jQuery. While doing some of my research I've been seeing a lot of people use the placeholder attribute in a div. However, this does not follow the specification and I end up with the following error when I try to validate my HTML.
Attribute “placeholder” not allowed on element “div” at this point.
Is there a better way to do this so that my HTML will validate and I still end up with a placeholder?
Thanks to Juantxo Cruz's link I was able to fix my issue by using CSS as shown below:
HTML
<div contentEditable=true data-placeholder="Sample text"></div>
CSS
[contentEditable=true]:empty:not(:focus):before {
content:attr(data-placeholder)
}
I am using a spark RichText component to render a html text in my Flex Web Application.
The html text that is given to me is with HTML elements with 'style' attribute having all the styles.
For Example:-
<p style="text-align: left;"><b>Hello</b> <i>this is a sample</i>
<font style="color: #ff0000;">HTML text</font></p><p style="text-align: right;">
<u>to be rerndered in FLEX</u></p>
Now, the Flex spark RichText does not show all these styles applied to the text.
However, if I have HTML with inline property attributes (without 'style' attribute) e.g. :-
<font color="#ff0000">Hello</font>
With the above, I get the desired style.
Any pointers/ solution to get around with this, and render the styles will be appreciated.
Thanks,
Mangirish
Try using <span style="color:#FF0000;">HTML text</span> and see if that makes any difference? I'm not too sure how well Flex renders older HTML tags. Besides, <font> is deprecated anyway.
If your css is fix, you can use StyleSheet Object
Here is a tutorial : http://learnola.com/2008/12/03/actionscript-3-tutorial-using-html-and-css/
If you need more information, just ask it in comments.
Short answer, TLF won't support that kind of styles that I know of, but you can always try to convert it to see what happens:
var textflow:TextFlow = TextConverter.importToFlow(yourHTMLString, TextConverter.TEXT_FIELD_HTML_FORMAT);
However, I have a sneaking suspicion that it won't convert the style properly and probably just ignore it altogether. The only solution I can think of is
Have a custom way to parse the html and get the style out and set it on the textflow or
Have the 'server' html be fixed to be compatible with the flex TLF (inline styles)
I would personally prefer the second option since it's easier to implement on the client.
I am writing an e-mail HTML template, and some e-mail clients do not support <style> for specifying CSS. The only alternative for applying CSS is to use inline styles (style attribute). Is there a tool or library (Node.JS) for applying a stylesheet to some HTML and getting back the HTML with the styles applied?
The tool does not have to support many selectors; id, class, and element name selectors should be sufficient for my needs.
Example of what is needed:
// stylesheet.css
a { color: red; }
// email.html
<p>This is a test</p>
// Expected result
<p>This is a test</p>
I think juice is what you're looking for.
Simply require it, then pass it your html and css and let it do the heavy lifting for you like this:
var juice = require('juice');
var inlinedcss = juice('<p>Test</p>', 'p { color: red; }');
It builds on a number of mature libraries including mootools' slick, and supports a broad range of selectors.
You may also be interested in node-email-templates, which is a nice wrapper for dynamic emails in node.
Here's the alive javascript projects that does what you want:
juice. 1.7Mb with dependencies.
juice2. 5.9Mb with dependencies. This is a fork of juice, seems to be containing more options than juice. This one doesn't drop media queries as juice does. Sorts inline css rules alphabetically.
styliner. 4.0Mb with dependencies. This one uses promises instead. Have a couple of different options than juice2. Has a compact option that other ones don't have that minifies the html. Doesn't read the html file itself as others do. Also extends margin and padding shorthands. And in case you somehow modify your native objects(like if you are using sugar) I don't suggest using this till this issue is resolved.
So which one to use? Well it depends on the way you write CSS. They each have different support for edge cases. Better check each and do some tests to understand perfectly.
You could use jsdom + jquery to apply $('a').css({color:'red'});
2020 solution
https://www.npmjs.com/package/inline-css
var inlineCss = require('inline-css');
var html = "<style>div{color:red;}</style><div/>";
inlineCss(html, options)
.then(function(html) { console.log(html); });
Another alternative is to go back to basics. If you want a link to be red, instead of
my link
do
<font color="red">my link</font>
Almost any browser, including the terrible BlackBerry browser can handle that.