I have the following text:
<div>Answer the following <span class='title'>Question:</span><br> (a+b)<sup>2</sup>=?</div>
I want to do the following with this text:
parse it tag by tag, so that I can render each of the tag in a custom way. I could, very well, achieve that using this library: https://github.com/Thomas101/react-native-fence-html.
while parsing the superscript/subscript tags, render the content in proper fashion. This is where I'm stuck right now.
What I'm doing right now, is that I put the entire text (from start to end) in a Text component; and each span and br tags are also rendered as Text components nested within the parent Text component (the one for the div tag).
How do I render the superscript/subscript text?
Note: I did find a solution here: Superscript Text in React Native
But, creating a View inside a Text component needs the View to have fixed dimensions, and that is something not achievable.
One option would be to convert the HTML to Markdown first and then render the markdown. I believe for both of those actions there are libraries available.
Related
I'm using storyblok-nuxt module. I have a storyblok component with rich text. I'd like to create a sidebar with list of heading that appears in this rich text for navigation purposes. Is there a way to extract those headings from rich text using storyapi, or do I need to do this manually?
I ended up creating "Article" component in Storyblok with title and body properties, where body is my rich text field. Iterating through titles is not a problem and in this case I make sure that every Article has a title.
I have a vue project using mathjax to render partial html files which include some mathml inside. Those files are dynamically retrieved from remote server when customers search something and shown with vue v-html as raw html.
In details, all these occurs in the component 'Home', in the mounted function, I add mathjax related script as below:
const mathjaxScript = document.createElement('script');
mathjaxScript.setAttribute('id', 'MathJax-script');
mathjaxScript.setAttribute('async', 'async');
mathjaxScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js');
document.head.appendChild(mathjaxScript);
Then when customers search some keyword, corresponding partial html file will be retrieved and replace v-html tag, the math equation should be shown expectedly. However, those embeded mml:math tags weren't handled, they are just plain text, the math equation not handled correctly.
However, when I put one partial html in the vue template (not dynamically retrieve from remote server), the math equation rendered correctly. the mml:math tag will be replaced with mjx-container, etc.
So my question is: how to apply mathjax to those dynamically retrieved mathml? that is, rendering mathml on the fly with mathjax, Thanks.
Note: I use vuejs, mathjax 3 and typescript.
I am using vue2-editor and i want to toggle the content view of the editor like ckeditor or mailchimp editor does
It is possible using vue2-editor or quill?
You can have a computed property that either returns the actual text or uses a library like hypertext to generate html, the return value of the html would be contingent on another computed property and returns the html you want.
I also have a simpler solution, which I used once but need to take a look at my code in a few hours which is not in front of me.
I'm using react-native-htmlview to render html text this package gives a lot of customization options what I want to ask is how can I replace bullets with an image or may be a react-native-vector-icon component the library gives an option to replace bullet with a text string can I replace it with icon or image?
Any help would appreciated you may suggest some other light weight package that serve this purpose I also need please keep in mind that I want to apply styles based on the tags and my styles includes the custom font.
I'm building a google-style text box that auto-completes typed text.
Using typeahead with typeahead.js-bootstrap.css:
$(document).ready(function() {
$('#op1').typeahead({
remote: '/search/%QUERY',
});
});
<input type="text" id="op1">
it worked but there are two problems:
I could not customize it. Whenever I make any significant style changes, or use bootstrap's form-control class for input element: the text box gets completely messed up.
The auto-completed ("hint") text was written above the typed text so I whatever color I set for the hint was the color of the entire text! I tried giving the hint a negative z-order but then it was not displayed at all.
I've tried Typeahead AND Select2 auto-completion libraries with my Bootstrap 3 template, and so far the only thing I was able to work out-of-the-box without completely ruining the layout was the above code
If anyone can solve these problems, or otherwise recommend a full CSS + JS typeahead solution for Bootstrap3, I'd be grateful :)
It gives you completely easy way to customise the look with formatresults. You can even write full html view for your results. and to customise the look of input box apply a class to the wrapper for your search box and override select2 rendered css(load the page and check from browser that from where that style is coming).
http://ivaynberg.github.io/select2/
I made a full featured customised search with this.
There is now a fork available for select2 that supports Bootstrap 3.
http://fk.github.io/select2-bootstrap-css/
https://github.com/fk/select2-bootstrap-css#readme