I'm trying to implement this Katex auto-rendering extension: https://katex.org/docs/autorender.html, it looks for specific delimiters to find katex strings and renders them in the HTML.
I've followed the instructions and added the CDN to the header of my index.html like so:
<!-- KATEX AUTO RENDERING -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex#0.12.0/dist/katex.min.css"
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
crossorigin="anonymous"
/>
<script type="module">
import renderMathInElement from "https://cdn.jsdelivr.net/npm/katex#0.12.0/dist/contrib/auto-render.mjs";
renderMathInElement(document.body);
</script>
As a test, I put the following in my <body> tag of my index.html:
<body>
<div>
<div>
The formula $a^2+b^2=c^2$ will be rendered inline, but $$a^2+b^2=c^2$$
will be rendered as a block element.
</div>
<br />
<div>
The formula \(a^2+b^2=c^2\) will be rendered inline, but \[a^2+b^2=c^2\]
will be rendered as a block element.
</div>
</div>
<div id="app"></div>
</body>
It works perfectly, I can see the katex rendered on the screen.
But now I want to add these types of katex formula strings in my other Vue components. I put the exact same formula div in my Home.vue component's template:
<template>
<div>
<app-header></app-header>
<div>
<div>
The formula $a^2+b^2=c^2$ will be rendered inline, but $$a^2+b^2=c^2$$
will be rendered as a block element.
</div>
<br />
<div>
The formula \(a^2+b^2=c^2\) will be rendered inline, but \[a^2+b^2=c^2\]
will be rendered as a block element.
</div>
</div>
<textbook-selection></textbook-selection>
<app-footer></app-footer>
</div>
</template>
But the katex is not rendered. Why does this happen?
I'm using Vue v2.6.11 with Katex v0.12.0, with vue-cli, vue-router, babel, if those are of any relevance.
Related
Hello everyone so new to laravel here, I just want to ask how to put JS into the file that automatically created when running php artisan ui vue --auth, because whenever I try to add it into resources/views/auth/register.blade.php I get
[Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
sorry for random question I just want to know how, and also how to add css, thank you so much in advance
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
You are logged in!
</div>
</div>
</div>
</div>
more code here since they dont allow
#endsection
You're trying to add a <script> to your blade #section, which is why you're getting that error. There are a few ways to do this.
1.. Add your script tags to views/layouts/app.blade.php right before the </body> tag, for example:
<script></script>
</body>
</html>
2.. Place them in your <head> tag and add the defer attribute
<script defer></script>
Your register.blade.php and any other view that extends app.blade.php will now have access to these scripts because it extends the app.blade.php layout.
3.. Use the Blade #stack directive to push your script to a stack. Stacks can be named, in this example lets simply use the name scripts. Add this to register.blade.php
#push('scripts')
<script></script> <!-- Add your JS file or JS code -->
#endpush`
Now in the <head> tag of your app.blade.php you can place #stack('scripts')
Note: Only register.blade.php will load this script, any other view that extends app.blade.php will not have access to it.
If i click on a link in my sapper application, the new route is appended to the _layout <slot> instead of replacing it.
The following is an example, first, the DOM before the link was clicked:
<div id="sapper>
<main>
<!-- This is is the index.svelte page -->
</main>
</div>
Then after clicking a link:
<div id="sapper>
<main>
<!-- This is the index.svelte page -->
</main>
<main>
<!-- This is a subpage -->
</main>
</div>
Has anyone encountered this before? How could I troubleshoot this?
I'm migrating a web application Java/jsp to a reactjs.
The pages are built with jsp templates, which compose the final HTML.
So I cannot use (yet) Reactjs to render my entire application, but just for render some component into the DOM.
So I have a mixed rendering, like this
<html>
</html>
<body>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer> <!-- JSP code -->
</body>
Everyhting works fine so far, so I'm trying to introduce Redux to handle the state, but I got stucked when I should render the <Provider /> component as the docs says, since I don't have an entry point for my application.
So I tried adding one, wrapping all my app code into a div:
<html></html>
<body>
<div id="app">
<header></header>
<!-- etc... -->
</div>
</body>
And then in my index.js
render(
<Provider store={store}>
<div />
</Provider>,
window.document.getElementById('app')
);
But of course it doesn't work, all my page is blank now, and the block <div id="app"> is empty
Does this Provider element must include all my components in order to work? Can I use Redux with this mixed setup?
I'm kind of lost, any help would be great.
The Provider component should wrap all the components that will use your Redux store via connect(). Redux documentation recommends just wrapping all components in Provider because there is no problem since you're just using a single store.
In React you shouldn't need to ever put elements directly in the body because this is done dynamically.
Here is an example of what your main application files should look like:
index.html
<!doctype html>
<html lang="en">
<head>
... some scripts/css...
</head>
<body>
<div id="root">
// intentionally nothing here. will be dynamically inserted via React later
</div>
</body>
</html>
entry.tsx:
ReactDOM.render(
<Provider store={store}>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer>
</Provider>,
document.getElementById('root')
);
To make an entry point simply add the following to your webpack config file:
module.exports = {
entry: './entry.tsx',
...
}
This is the barebones of a React-Redux application that you should follow when you are ready to transition.
I would like to include the linkedin follow button in the specific location of my react page. How do I render the tags below into a div?
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: pt_BR</script>
<script type="IN/FollowCompany" data-id="xxxxx"></script>
Thanks.
You can create a React component that renders script tags with the JavaScript code inserted as a string using dangerouslySetInnerHTML, like this:
function LinkedInSnippet({ id }) {
return (
<div>
<script
src="//platform.linkedin.com/in.js"
dangerouslySetInnerHTML={{
__html: 'lang: pt_BR'
}}
/>
<script type="IN/FollowCompany" data-id={id} />
</div>
);
}
I assumed that you'd want to set the ID dynamically, so I've made so that it is passed to the component as a prop. You can then use the component like this:
<LinkedInSnippet id="xxxxxxx" />
i have two elements, in different html files, how can i show the resume of these elements in the core-component-core?, when i join both files in one html file, looks well, but in different files does not. Only show the "master" element (element-one).
Component 1:
<!--
##### Example:
<element-one name="ruben"></element-one>
#element element-one
#blurb Firts element.
#status alpha
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="element-two.html">
<polymer-element name="element-one" attributes="name">
<template> ... </template>
<script>
Polymer( 'element-one', { ... });
</script>
</polymer-element>
Component 2:
<!--
##### Example:
<element-two subname="cid"></element-two>
#element element-two
#blurb Second element.
#status alpha
-->
<polymer-element name="element-two" attributes="subname">
<template> ... </template>
<script>
Polymer( 'element-two', { ... });
</script>
</polymer-element>
The component-page link on https://github.com/Polymer/core-component-page doesn't point anywhere meaningful, so it's ironically difficult to view the docs for the thing that generates the docs. (I've filed a bug about that.)
But if you look at the source, you'll see two attributes on <core-component-page>. sources takes an array of .html files corresponding to each element you want documented.
An example of this is the index.html source for <google-map>, which renders as this component page.