For context: I am trying to dump recipes that I exported from Paprika in html format.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/* Shared styles */
body {
font-family: Helvetica, sans-serif;
font-size: 16.0px;
color: #34302e;
margin: 0.25in;
}
.name {
font-size: 18.0px;
font-family: Helvetica, sans-serif;
font-weight: normal;
margin: 0 0 10px 0;
}
.categories {
color: #605D5D;
font-size: 14.0px;
font-family: Helvetica, sans-serif;
font-style: italic;
}
.rating {
color: #d10505;
font-size: 14.0px;
}
.metadata {
font-size: 14.0px;
}
.infobox p {
margin: 0;
line-height: 150%;
}
.subhead {
color: #d10505;
font-weight: bold;
font-size: 14.0px;
text-transform: uppercase;
margin: 10px 0;
}
.ingredients p {
margin: 4px 0;
}
/* To prevent nutrition/directions from getting too close
to ingredients */
.ingredients {
padding-bottom: 10px;
}
.clear {
clear:both;
}
a {
color: #4990E2;
text-decoration: none;
}
/* Full page specific styles */
.text {
line-height: 130%;
}
.photobox {
float: left;
margin-right: 14px;
}
.photo {
max-width: 140.0px;
max-height: 140.0px;
width: auto;
height: auto;
}
.inline-image {
max-width: 25%;
max-height: 25%;
width: auto;
height: auto;
}
.photoswipe {
border: 1px #dddddd solid;
cursor: pointer;
}
.pswp__caption__center {
text-align: center !important;
}
.recipe {
page-break-after: always;
}
.recipe:first-child {
border-top: 0 none;
margin-top: 0;
padding-top: 0;
}
</style>
</head>
<body>
<!-- Recipe -->
<div class="recipe" itemscope itemtype="http://schema.org/Recipe" >
<div class="infobox">
<!-- Image -->
<div class="photobox">
<a href="#">
<img src="Images/BFDBD8FA-5EC8-4660-B4F3-4AE5BA3E7F66-40234-000073E72DA33D42/04742637-7629-4B01-A754-F5B5030738D9-40234-000073FDC958E3E6.jpg" itemprop="image" class="photo photoswipe"/>
</a>
</div>
<!-- Name -->
<h1 itemprop="name" class="name">Tomato and Onion Salad</h1>
<!-- Info -->
<!-- Rating, categories -->
<p itemprop="aggregateRating" class="rating" value="0"></p>
<p itemprop="recipeCategory" class="categories">Salads</p>
<p class="metadata">
<!-- Cook time, prep time, servings, difficulty -->
<!-- Source -->
</p>
<div class="clear"></div>
</div>
<div class="left-column">
<!-- Ingredients -->
<div class="ingredientsbox">
<h3 class="subhead">Ingredients</h3>
<div class="ingredients text">
<p class="line" itemprop="recipeIngredient"><strong>5-6</strong> medium ripe tomatoes</p><p class="line" itemprop="recipeIngredient"><strong>1</strong> small red onion or sweet white onion 3 Tbls. olive oil</p><p class="line" itemprop="recipeIngredient"><strong>1</strong> Tbl. oregano</p><p class="line" itemprop="recipeIngredient">salt and pepper to taste</p>
</div>
</div>
<!-- Nutrition (in two-column mode it goes below the ingredients) -->
</div>
<div class="right-column">
<!-- Description -->
<div class="descriptionbox">
<h3 class="subhead">Description</h3>
<div itemprop="description" class="description text">
<p>When there is an abundance of fresh, ripe tomatoes from the garden this salad is a delicious summer side dish. Because of the mild acidity of the tomatoes, this salad needs no vinegar.</p>
</div>
</div>
<!-- Directions -->
<div class="directionsbox">
<h3 class="subhead">Directions</h3>
<div itemprop="recipeInstructions" class="directions text">
<p class="line">Cut the tomatoes into bite-size pieces and place in a bowl. </p><p class="line">Cut the onion in half and slice thinly.</p><p class="line">Add onion to the tomatoes along with the olive oil, oregano and salt and pepper.</p><p class="line">Mix well.</p>
</div>
</div>
<!-- Notes -->
<!-- Nutrition (in regular mode it goes below the notes) -->
<!-- Used in two different places depending on the recipe layout -->
</div>
<div class="clear"></div>
</div>
<!-- Photo gallery is only included when exporting. -->
<!-- PhotoSwipe gallery -->
<link rel="stylesheet" href="Resources/PhotoSwipe/photoswipe.css">
<link rel="stylesheet" href="Resources/PhotoSwipe/default-skin/default-skin.css">
<script src="Resources/PhotoSwipe/photoswipe.min.js"></script>
<script src="Resources/PhotoSwipe/photoswipe-ui-default.min.js"></script>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close"></button>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var openPhotoSwipe = function(event) {
var pswp = document.querySelector('.pswp');
var element = event.target;
var src = element.getAttribute('src');
// build items array
var items = [
{
msrc: 'Images/BFDBD8FA-5EC8-4660-B4F3-4AE5BA3E7F66-40234-000073E72DA33D42/7964AAC3-6536-461B-9EDA-9F4B33F8E823-40234-000073ED0D1B8203.jpg',
src: 'Images/BFDBD8FA-5EC8-4660-B4F3-4AE5BA3E7F66-40234-000073E72DA33D42/7964AAC3-6536-461B-9EDA-9F4B33F8E823-40234-000073ED0D1B8203.jpg',
w: 742.0,
h: 558.0,
title: '1'
},
];
var index = 0;
for (var i=0; i<items.length; i++) {
var item = items[i];
if (item.src == src) {
index = i;
}
}
var options = {
index: index,
history: false,
focus: true,
captionEl: true,
fullscreenEl: false,
zoomEl: false,
shareEl: false,
preloaderEl: false,
bgOpacity: 0.9,
showHideOpacity: true
};
var gallery = new PhotoSwipe(pswp, PhotoSwipeUI_Default, items, options);
gallery.init();
};
var elements = document.querySelectorAll('.photoswipe');
for (var i=0; i<elements.length; i++) {
var element = elements[i];
element.addEventListener('click', openPhotoSwipe);
}
</script>
</body>
</html>
[](#)
# Tomato and Onion Salad
Salads
### Ingredients
**5-6** medium ripe tomatoes
**1** small red onion or sweet white onion 3 Tbls. olive oil
**1** Tbl. oregano
salt and pepper to taste
### Description
When there is an abundance of fresh, ripe tomatoes from the garden this salad is a delicious summer side dish. Because of the mild acidity of the tomatoes, this salad needs no vinegar.
### Directions
Cut the tomatoes into bite-size pieces and place in a bowl.
Cut the onion in half and slice thinly.
Add onion to the tomatoes along with the olive oil, oregano and salt and pepper.
Mix well.
var openPhotoSwipe = function(event) { var pswp = document.querySelector('.pswp'); var element = event.target; var src = element.getAttribute('src'); // build items array var items = \[ { msrc: 'Images/BFDBD8FA-5EC8-4660-B4F3-4AE5BA3E7F66-40234-000073E72DA33D42/7964AAC3-6536-461B-9EDA-9F4B33F8E823-40234-000073ED0D1B8203.jpg', src: 'Images/BFDBD8FA-5EC8-4660-B4F3-4AE5BA3E7F66-40234-000073E72DA33D42/7964AAC3-6536-461B-9EDA-9F4B33F8E823-40234-000073ED0D1B8203.jpg', w: 742.0, h: 558.0, title: '1' }, \]; var index = 0; for (var i=0; i<items.length; i++) { var item = items\[i\]; if (item.src == src) { index = i; } } var options = { index: index, history: false, focus: true, captionEl: true, fullscreenEl: false, zoomEl: false, shareEl: false, preloaderEl: false, bgOpacity: 0.9, showHideOpacity: true }; var gallery = new PhotoSwipe(pswp, PhotoSwipeUI_Default, items, options); gallery.init(); }; var elements = document.querySelectorAll('.photoswipe'); for (var i=0; i<elements.length; i++) { var element = elements\[i\]; element.addEventListener('click', openPhotoSwipe); }
[](#)
# Tomato and Onion Salad
Salads
### Ingredients
**5-6** medium ripe tomatoes
**1** small red onion or sweet white onion 3 Tbls. olive oil
**1** Tbl. oregano
salt and pepper to taste
### Description
When there is an abundance of fresh, ripe tomatoes from the garden this salad is a delicious summer side dish. Because of the mild acidity of the tomatoes, this salad needs no vinegar.
### Directions
Cut the tomatoes into bite-size pieces and place in a bowl.
Cut the onion in half and slice thinly.
Add onion to the tomatoes along with the olive oil, oregano and salt and pepper.
Mix well.
<script type="text/javascript">
var openPhotoSwipe = function(event) {
var pswp = document.querySelector('.pswp');
var element = event.target;
var src = element.getAttribute('src');
// build items array
var items = [
{
msrc: 'Images/BFDBD8FA-5EC8-4660-B4F3-4AE5BA3E7F66-40234-000073E72DA33D42/7964AAC3-6536-461B-9EDA-9F4B33F8E823-40234-000073ED0D1B8203.jpg',
src: 'Images/BFDBD8FA-5EC8-4660-B4F3-4AE5BA3E7F66-40234-000073E72DA33D42/7964AAC3-6536-461B-9EDA-9F4B33F8E823-40234-000073ED0D1B8203.jpg',
w: 742.0,
h: 558.0,
title: '1'
},
];
var index = 0;
for (var i=0; i<items.length; i++) {
var item = items[i];
if (item.src == src) {
index = i;
}
}
var options = {
index: index,
history: false,
focus: true,
captionEl: true,
fullscreenEl: false,
zoomEl: false,
shareEl: false,
preloaderEl: false,
bgOpacity: 0.9,
showHideOpacity: true
};
var gallery = new PhotoSwipe(pswp, PhotoSwipeUI_Default, items, options);
gallery.init();
};
var elements = document.querySelectorAll('.photoswipe');
for (var i=0; i<elements.length; i++) {
var element = elements[i];
element.addEventListener('click', openPhotoSwipe);
}
</script>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent