I would like to convert a big TeX source using htlatex into HTML pages. The TeX file contains equations formatted with Mathjax. For this purpose, and from this link, I am using the following config.cfg :
\usepackage{verbatim}
\usepackage[T1]{fontenc}
\Preamble{xhtml}
% Configure for mathjax
\Configure{VERSION}{}
\Configure{DOCTYPE}{\HCode{<!DOCTYPE html>\Hnewline}}
\Configure{HTML}{\HCode{<html>\Hnewline}}{\HCode{\Hnewline</html>}}
\Configure{#HEAD}{\HCode{
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: {
Macros: {
\unexpanded{ bt: ['{\$\\mathb\{\#1\}\$}',1],
beq: ['{\\mathbf\{\#1\}}',1],}
}
},
extensions: ["AMSmath.js"],
equationNumbers: {autoNumber: "AMS"},
extensions: ["tex2jax.js"],
tex2jax: {
\unexpanded{
inlineMath: [ ['\$','\$'], ["\\\\(","\\\\)"] ],
displayMath: [ ['\\begin{displaymath}','\\end{displaymath}'], ['\\begin{equation}','\\end{equation}'], ['$$','$$'], ["\\[","\\]"] ],}
processEscapes: true
}
});
</script>
}}
\Configure{#HEAD}{\HCode{<script type="text/javascript"\Hnewline
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"\Hnewline
></script>\Hnewline}}
\newtoks\eqtoks
\def\AltMath#1${\eqtoks{$#1$}%
\HCode{\the\eqtoks}$}
\Configure{$}{}{}{\expandafter\AltMath}
\def\AltlMathI#1\){\eqtoks{\(#1\)}%
\HCode{\the\eqtoks}}
\Configure{()}{\AltlMathI}{}
\def\AltlDisplay#1\]{\eqtoks{\[#1\]}%
\HCode{\the\eqtoks}}
\Configure{[]}{\AltlDisplay}{}
\begin{document}
\newcommand\VerbMath[1]{%
\renewenvironment{#1}{%
\NoFonts%
\string\begin\{#1\}%
\verbatim}{\endverbatim\string\end\{#1\}\EndNoFonts}%
}
\VerbMath{equation}
\VerbMath{equation*}
\VerbMath{cases}
\VerbMath{array}
\VerbMath{matrix}
\VerbMath{pmatrix}
\VerbMath{eqnarray}
\VerbMath{eqnarray*}
\EndPreamble
Here is the command that I use to generate HTML pages (with 3rd level) :
htlatex document.tex "config,3"
Unfortunately, the equations are not referenced and I don't know how to do this. May this issue come from the fact that there are multiple HTML pages being generated?
Moreover, some equation references are not in the HTML page where they are defined with \label. Is there a trick to achieve this?
Related
I'm doing a Frontend Mentor challenge and I've ran into a problem when publishing my project to Vercel.
The background image can't load. Everything works on my local machine, but when deployed, the only image that doesn't load is that background image.
I'm using the Vite buildtool, React and TailwindCSS.
The image path is ./public/images/bg-mobile.svg
I imported the image in my tailwind.config.cjs and use it as a tailwin "bg-" class.
If anyone knows what I'm doing wrong, I'd be really happy to know.
//tailwind.config.cjs
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
"huddle-violet": "hsl(257, 40%, 49%)",
"huddle-magenta": "hsl(300, 69%, 71%)",
},
backgroundImage: {
"desktop": "url('./images/bg-desktop.svg')",
"mobile": "url('./images/bg-mobile.svg')"
},
},
},
plugins: [require('prettier-plugin-tailwindcss')],
};
//index.html
<body class="bg-huddle-violet bg-mobile bg-contain bg-no-repeat">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
Link to the hosted site
Link to the Github repo
The relative path being used is wrong.
./ with this you mean one heirarchy up.
But according to your question ./public/images/bg-mobile.svg
So try replacing ./ with / it should work.
Final code:
backgroundImage: {
"desktop": "url('/images/bg-desktop.svg')",
"mobile": "url('/images/bg-mobile.svg')"
},
backgroundImage: {
"desktop": "url('/images/bg-desktop.svg')",
"mobile": "url('/images/bg-mobile.svg')"
},
I have a highcharts graphic, which consists of a static javascript code and a dynamic preformatted HTML text (pre) containing CSV data. (The dynamic text with the CSV data is updated daily, the Javascript code remains unchanged).
Now I would like to add a footnote, e.g. using "caption", which should also be dynamic.
How can I make the footer dynamic?
I had the idea to write the footnote into the CSV data and read it out of there, but I didn't succeed.
The jsfiddle example is here:
https://jsfiddle.net/martindfurrer/r4tjdka9/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="background: pink; width: 400px; height: 300px"></div>
<!--dynamic csv data from other source-->
<pre id="csv" style="display:none">
"utcdate;"value"
"1";"181"
"2";"225"
"3";"171"
"4";"188"
"5";"246"
"6";"98"
"7";"48"
</pre>
<script type='text/javascript'>
// static javascript code
Highcharts.chart('container', {
title: {
text: 'Corona Virus cases'
},
subtitle: {
text: 'Data input from CSV'
},
data: {
csv: document.getElementById('csv').innerHTML
},
series: [ {
name: 'Infection rate',
type: 'column',
}],
caption: {
text: 'The Javascript code is static, the csv data is dynamic. This text should also be dynamic, i.e. some sort of variable',
}
});
</script>
You can use for example a load event to update the caption with dynamic content:
chart: {
events: {
load: function() {
this.update({
caption: {
text: document.getElementById('dynamicCaption').innerHTML
}
});
}
}
}
Or just use a HTML reference in a text property:
caption: {
text: document.getElementById('dynamicCaption').innerHTML,
}
Live demo: https://jsfiddle.net/BlackLabel/zbkhm41r/
API Reference:
https://api.highcharts.com/highcharts/caption.text
https://api.highcharts.com/class-reference/Highcharts.Chart#update
I'm trying to put an image as logo, on the right hand side next to the title and want it to work embedded in a single HTML file, but I'm not succeeding (for instance, to share only the HTML file and not both the HTML file and the image).
Here is the code I have:
---
title: "Title"
header-includes: \usepackage{graphicx}
author: "Team"
date: "Date"
output:
html_document
---
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<img src="Image_I_Want.png\" style=\"float: right;width: 250px;\"/>')
});
</script>
<br>
## 1) Some nice title
Thank you in advance!
Here is the link to logo.jpg:
https://s-media-cache-ak0.pinimg.com/736x/a7/e8/fa/a7e8fa149fb23e4cbcfe9e8406b6b911.jpg
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<img src=\"logo.jpg\" style=\"float: right;width: 150px;\"/>')
});
</script>
---
title: "Title"
header-includes: \usepackage{graphicx}
author: "Team"
date: "Date"
output:
html_document
---
This is going to be hard to do using Markdown. Markdown trades simplicity for control. I don't know how it prints out the title where you want your logo to be.
Two possible alternatives:
Create the HTML using 'knit', then edit it manually.
Write an RHTML document just using pure HTML.
If you don't know HTML, use a WYSIWYG program (or find a web designer).
The HTML you want is going to be something like:
<h1>My company title</h1><img style='float:right;' src='myimage.png'>
<div id="film">...</div>
<script>
jwplayer("film").setup({
width:640,
height:360,
playlist: [{
file: "https://videolink.mp4",
image: "https://videopic.jpg",
tracks: [{
file: "http://video.srt",
label: "English",
kind: "captions",
"default": true
}]
}],
captions: {
color: '#FFFFFF',
fontSize: 10,
backgroundOpacity: 50
}
});</script>
I want to hide this code when users view with right click "Page source". How can I do it?
example 720pizle.com/izle/altyazi/american-sniper.html there is no embed code or video link in source code
You can't totally hide it, but you could use a tool to make it slightly more difficult to read for someone who isn't that technical. However, anyone with basic technical knowledge will be able to figure out the actual embed code using a developer tool (such as the Chrome dev tools, Firebug, etc).
http://www.dynamicdrive.com/dynamicindex9/encrypter.htm
That will make the code harder to read.
It isn't 100% secure though.
For instance, your code:
<div id="film">...</div>
<script>
jwplayer("film").setup({
width:640,
height:360,
playlist: [{
file: "https://videolink.mp4",
image: "https://videopic.jpg",
tracks: [{
file: "http://video.srt",
label: "English",
kind: "captions",
"default": true
}]
}],
captions: {
color: '#FFFFFF',
fontSize: 10,
backgroundOpacity: 50
}
});</script>
Would turn into:
<script>
<!--
document.write(unescape("%3Cdiv%20id%3D%22film%22%3E...%3C/div%3E%0A%3Cscript%3E%0Ajwplayer%28%22film%22%29.setup%28%7B%0A%20%20%20%20width%3A640%2C%0A%20%20%20%20height%3A360%2C%0A%20%20%20%20playlist%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20file%3A%20%22https%3A//videolink.mp4%22%2C%0A%20%20%20%20%20%20%20%20image%3A%20%22https%3A//videopic.jpg%22%2C%0A%20%20%20%20%20%20%20%20tracks%3A%20%5B%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20file%3A%20%22http%3A//video.srt%22%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20label%3A%20%22English%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3A%20%22captions%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22default%22%3A%20true%20%0A%20%20%20%20%20%20%20%20%7D%5D%0A%7D%5D%2C%0A%20captions%3A%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20%27%23FFFFFF%27%2C%0A%20%20%20%20%20%20%20%20fontSize%3A%2010%2C%0A%20%20%20%20%20%20%20%20backgroundOpacity%3A%2050%0A%20%20%20%20%7D%0A%7D%29%3B%3C/script%3E"));
//-->
</script>
But someone could un encrypt it using a tool, or just use Firebug, etc, to see the actual output.
Yes It is possible. create session variable in php and try to run video code
is it possible in a TimelineJs instance to load JSON data from a variable in the page?
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'example_json.json'
}
</script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
this is the default code from the timelineJS example.
Basically i'm trying to replace the source: 'example_json.json' with a
source: '{
"timeline":
{
"headline":"Sh*t People Say",
"type":"default",
"text":"People say stuff",
"startDate":"2012,1,26",
"date": [
{
"startDate":"2011,12,12",
"endDate":"2012,1,27",
"headline":"Vine",
"text":"<p>Vine Test</p>",
"asset":
{
"media":"https://vine.co/v/b55LOA1dgJU",
"credit":"",
"caption":""
}
},
{
"startDate":"2012,1,26",
"endDate":"2012,1,27",
"headline":"Sh*t Politicians Say",
"text":"<p>In true political fashion, his character rattles off common jargon heard from people running for office.</p>",
"asset":
{
"media":"http://youtu.be/u4XpeU9erbg",
"credit":"",
"caption":""
}
}
]
}
}'
but it doesn't work
The problem is that you are passing in the JSON object as a string. Remove quotation marks and it should work. Should look like this:
source: {
"timeline": {
...
}
}
I've put together a working example on JSFiddle