From 9576b121e45cf84de23ac799dc13dc58e09feb19 Mon Sep 17 00:00:00 2001
From: Fabien Quatravaux <fabien.quatravaux@riseup.net>
Date: Thu, 15 Apr 2021 18:23:16 +0200
Subject: [PATCH] docs: Fix html syntax highlighting
---
README.md | 26 +++++++++++++-------------
1 file changed, 13 insertions(+), 13 deletions(-)
diff --git a/README.md b/README.md
index edc4bbc..113c987 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ But a vast majority of podcast feeds are provided in RSS format. So let's use a
To use the Startin'blox framework, just embed it in the head of your html :
-```htmlmixed=
+ ```html
<!DOCTYPE html>
<html>
<head>
@@ -51,7 +51,7 @@ The `rss2jsonld` script is here to automatically convert RSS data source to JSON
We can now use our first blox : `<solid-display>`. Startin'blox use the [HTML Custom Element specification](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) which is part of the webcomponents standard, to create those blox. So you can use it as any other HTML tag, like `<video>` or `<select>`. This blox simply displays the data provided by the linked data source :
-```htmlmixed=
+ ```html
<solid-display data-src="http://radiofrance-podcast.net/podcast09/rss_20856.xml" no-render/>
```
@@ -65,7 +65,7 @@ The result is not very pretty: all fields are displayed in plain text without fo
To put data in order, we use the **`fields`** tag :
-```htmlmixed=
+ ```html
<solid-display
fields="title, description"
data-src="http://radiofrance-podcast.net/podcast09/rss_20856.xml" no-render=""
@@ -74,7 +74,7 @@ To put data in order, we use the **`fields`** tag :
`fields` take an ordered list of field names and make the component to display only those fields in the provided order.
We can also use a **widget** to specify how each field must be shown :
-```htmlmixed=
+ ```html
<solid-display
fields="title, description"
widget-title="h1"
@@ -89,7 +89,7 @@ It starts to look better !
Any HTML element can be used as widget, but Startin'blox also provide **built-in widgets** to easily manage specific cases. To display images from their url, use the `solid-display-img` widget :
-```htmlmixed=
+ ```html
<solid-display
fields="title, image.url, description"
widget-title="h1"
@@ -100,7 +100,7 @@ Any HTML element can be used as widget, but Startin'blox also provide **built-in
Fields can also be grouped in **sets** using brackets : each bracket opens or closes a group, and groups can be nested. The word before the opening bracket is the group name and can be used to have a specific widget to display this group.
-```htmlmixed=
+ ```html
<solid-display
fields="title, image.url, meta(itunes:author, itunes:category.text), description"
widget-title="h1"
@@ -116,7 +116,7 @@ Fields can also be grouped in **sets** using brackets : each bracket opens or cl
`solid-display` uses standard HTML to display the data, and that HTML can be styled with CSS.
-```htmlmixed=
+ ```html
<style>
solid-display {
max-width: 800px;
@@ -149,7 +149,7 @@ You can also target specific field with an attribute selector because `<solid-di
But sometimes it's easier and cleaner to use classes. `class-[field]` tags let's you specify a class name.
-```htmlmixed=
+ ```html
<style>
.bordered {
display: inline-block;
@@ -172,7 +172,7 @@ But sometimes it's easier and cleaner to use classes. `class-[field]` tags let's
You can also use arbitrary text (enclosed by single quotes) in the fields list to display a text node :
-```htmlmixed=
+ ```html
<solid-display
fields="title, image.url, meta('By: ', itunes:author, itunes:category.text), description"
[...]
@@ -187,7 +187,7 @@ Let's now display the informations about podcast episodes. They are listed in th
This is achieved with the `multiple-[field]` attributes. This tag creates a nested `<solid-display>` for each entry in `item`. `multiple-[field]-fields` attribute is used to control which nested fields are displayed for each item.
-```htmlmixed=
+ ```html
<solid-display
fields="title, header(image.url, info( meta('By: ', itunes:author, itunes:category.text), description)), item"
widget-title="h1"
@@ -208,7 +208,7 @@ This is achieved with the `multiple-[field]` attributes. This tag creates a nest
To go further, we need to create our own widget template using the `solid-widget` tag. Let's show other episode data:
-```htmlmixed=
+ ```html
<solid-widget name="podcast-episode">
<template>
<solid-display
@@ -235,7 +235,7 @@ To go further, we need to create our own widget template using the `solid-widget
When a custom widget template is used, it gets a javascript variable called `value` that contains the resource. It can be displayed directly in the template using `${value}` or you can apply some Javascript to it before. For example, here is how to format the date using the browser locale settings :
-```htmlmixed=
+ ```html
<solid-widget name="format-date">
<template>
<time datetime="${value}">${new Date(value).toLocaleDateString(undefined, {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'})}</time>
@@ -249,7 +249,7 @@ Now if I use `widget-pubDate="format-date"`, I get a nice formatted date :
And this template mechanism plays also nicely with other HTML5 standard tags, such as `audio`.
-```htmlmixed=
+ ```html
<solid-widget name="audio-player">
<template>
<audio src="${value}" controls/>
--
GitLab