1	cat << HTML
 2	
 3	<style>
 4	pre br {display:none}
 5	pre p {margin:0;display:inline}
 6	</style>
 7	<header><h1>spppan</h1>
 8	<p>Un parseur pour passer les premiers «P» de «P(re)P(ost)P(rint)» en anti-oblique et oblique</p>
 9	<br>
10	<details open>
11		<summary>spppan.css <i>exemple de feuille de style à appliquer</i></summary><pre>
12	HTML
13	cat -n << % | sed -E '
14		s	<	\<		g
15		s	>	\>		g
16		s	^(    ..\t)(#.*)	\1<span style="opacity:.5">\2</span>	g
17		s	^    (..)	<span style="opacity:.5">\1</span>		g
18		'
19	<style>
20		#ppp-pre, #ppp-post {display:inline-block;}
21		#ppp-pre  {transform:skew(15deg);}  /* ╲P╲  */
22		#ppp-post {transform:skew(-15deg);} /*  ╱P╱ */
23	</style>
24	%
25	cat << HTML
26	</pre></details><details open>
27		<summary>spppan.js <i>version en javascript, pour pencher à la volée, dans un navigateur</i></summary><pre>
28	HTML
29	cat -n << % | sed -E '
30		s	<	\<		g
31		s	>	\>		g
32		s	^(    ..\t)(#.*)	\1<span style="opacity:.5">\2</span>	g
33		s	^    (..)	<span style="opacity:.5">\1</span>		g
34		'
35	<script src="/js/filter.js"></script>
36	<script>
37	function spppan(text,deg) {
38		return text.replace(
39			/(p|pre)(p|post)(p|print)/ig,
40			\`<span id="ppp-pre">\$1</span><span id="ppp-post">\$2</span>\$3\`
41		);
42	}
43	</script>
44	%
45	cat << HTML
46	</pre>
47	</details>
48	HTML
49	
50	cat << HTML
51	<details open>
52		<summary>spppan.sh <i>version en sed contenue dans un script shell, pour pencher la source html en amont</i></summary><pre>
53	HTML
54	
55	cat -n << % | sed -E '
56		s	<	\<		g
57		s	>	\>		g
58		s	^(    ..\t)(#.*)	\1<span style="opacity:.5">\2</span>	g
59		s	^    (..)	<span style="opacity:.5">\1</span>		g
60		'
61	#!/usr/bin/env sh
62	
63	# décembre 2024
64	
65	# Une commande sed qui cherche dans un document html les occurences de
66	# prepostprint et de ppp avec ou sans majuscules (gI). Elle insère p(re) et
67	# p(ost) dans des span aux id «ppp-pre» (anti-oblique) et «ppp-post» (oblique).
68	
69	# PPPPPPPPPPPPpp             PPPPPPPPPPPPpp    PPPPPPPPPPPPPPp
70	# ppPPPPPPPPPPPPPPp          pPPPPPPPPPPPPPP    pPPPPPPPPPPPPPP
71	#    pPPp      ppPPPp        pPPP       pPPPp    PPP        pPPP
72	#     PPPp        PPPp       PPP         PPP     PPPp        PPP
73	#     pPPP        PPPP      PPPp      ppPPPp     PPP       pPPPP
74	#      pPPPPPPPPPPPPPp     pPPPPPPPPPPPPPp       PPPPPPPPPPPPPp
75	#       PPPPPPPPPPPpp     pPPPPPPPPPPPpp         PPPPPPPPPPpp
76	#        PPP              PPPp                   PPP
77	#        pPPP            PPPp                    PPP
78	#         pPPp          pPPP                     PPP
79	#         pPPPpp      ppPPPp                   pPPPPPp
80	#         PPPPPPP    PPPPPPP                   PPPPPPP
81	
82	sed -E '
83	s	(p|pre)(p|post)(p|print)\\
84		<span id="ppp-pre">\1</span><span id="ppp-post">\2</span>\3\\
85		gI
86	'
87	
88	# exemple : cat [FICHIER].html | ./pppspan.sh
89	%
90	cat << HTML
91	</pre>
92	</details>
93	HTML
94