Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:codepen [03/01/2021 14:04] – conny
+++ programmieren:codepen [03/01/2021 14:11] (aktuell) – conny
@@ Zeile 4: / Zeile 4: @@
 Dazu in den DokuWiki Einstellungen HTML erlauben "Keyword: htmlok" anklicken und auf der Seite folgenden Code eingeben:\\
+<code>
 <html>
-<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="Conny64" data-slug-hash="XWjEVKQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="XWjEVKQ">
+<iframe style="overflow-y: auto; width:100%; height: 500px; -webkit-overflow-scrolling: touch; display:block; vertical-align:top;" src="https://codepen.io/barkins/embed/dYVVOp"></iframe>
-  <span>See the Pen <a href="https://codepen.io/Conny64/pen/XWjEVKQ">
-  XWjEVKQ</a> by Conny (<a href="https://codepen.io/Conny64">@Conny64</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 </html>
+</code>
+Vorschau:
+<html>
+<iframe style="overflow-y: auto; width:100%; height: 500px; -webkit-overflow-scrolling: touch; display:block; vertical-align:top;"
+src="https://codepen.io/barkins/embed/dYVVOp"></iframe>
+</html>
+  Beim Link src="https://codepen.io/meine_Codepen_Seite"
+  müssen wir darauf achten, dass wir 'pen' durch 'embed' ersetzen.
+  Original: "https://codepen.io/webdev689/pen/MyXgVw"
+  NEU: "https://codepen.io/webdev689/embed/MyXgVw"
+==== Alternative ====
+Auf der CodePen Seite unten rechts auf "embed" klicken.
+{{ programmieren:mr1fr0kaqx.jpg?600 }}
+und anschließend den Code kopieren und im Text in HTML Tags einbinden
+{{ programmieren:dszu0jqkzx.jpg?600 }}