{"id":352,"date":"2023-03-07T15:50:41","date_gmt":"2023-03-07T14:50:41","guid":{"rendered":"http:\/\/localhost:8888\/?p=352"},"modified":"2025-11-26T15:50:41","modified_gmt":"2025-11-26T15:50:41","slug":"html-code-block","status":"publish","type":"post","link":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/2023\/03\/html-code-block\/","title":{"rendered":"HTML Code Block"},"content":{"rendered":"\n<p>The <strong>HTML Code<\/strong> block allows us to dynamic render HTML code and displays it in the browser.<\/p>\n\n\n\n<p>To demonstrate this we start with a publicly editable Text Editor block where we allow you to edit the HTML code, and below you will see live the rendered content.<\/p>\n\n\n\n<div class=\"wp-block-inseri-core-text-editor\" data-attributes=\"{&quot;blockId&quot;:&quot;3VlGm2k5Rh5KmDTvw3gmS&quot;,&quot;content&quot;:&quot;%3Cdiv%3E%0A%20%20%3Ch4%3EHello%20World%3C%2Fh4%3E%0A%3C%2Fdiv%3E&quot;,&quot;contentType&quot;:&quot;text\/html&quot;,&quot;editable&quot;:true,&quot;height&quot;:96,&quot;isVisible&quot;:true,&quot;label&quot;:&quot;Feel free to edit the HTML code&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;textEditor&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<div class=\"wp-block-inseri-core-html\" data-attributes=\"{&quot;blockId&quot;:&quot;VQVMkflhKsRpmQmf6I6DO&quot;,&quot;inputKey&quot;:&quot;3VlGm2k5Rh5KmDTvw3gmS\/content&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;html-7ve&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<p> But we can do more. We can use the Python Code block to generate some html and display it live. <\/p>\n\n\n\n<div class=\"wp-block-inseri-core-python\" data-attributes=\"{&quot;autoTrigger&quot;:false,&quot;blockId&quot;:&quot;GSR0EhU1w0opPyZoLJP5t&quot;,&quot;content&quot;:&quot;import%20pandas%20as%20pd%0Adf%20%3D%20pd.DataFrame(%7B%0A%20%20%20%20'a'%3A%20%5B'A'%2C%20'B'%2C%20'C'%2C%20'D'%2C%20'E'%2C%20'F'%2C%20'G'%2C%20'H'%2C%20'I'%5D%2C%0A%20%20%20%20'b'%3A%20%5B28%2C%2055%2C%2043%2C%2091%2C%2081%2C%2053%2C%2019%2C%2087%2C%2052%5D%0A%7D)%0Adf_as_html%20%3D%20df.to_html()&quot;,&quot;editable&quot;:true,&quot;height&quot;:150,&quot;inputCode&quot;:&quot;&quot;,&quot;inputs&quot;:{},&quot;isVisible&quot;:true,&quot;label&quot;:&quot;Feel free to edit the Python code&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;python-pandas&quot;},&quot;mode&quot;:&quot;editor&quot;,&quot;outputs&quot;:[[&quot;df_as_html&quot;,&quot;text\/html&quot;]]}\">is loading &#8230;<\/div>\n\n\n\n<div class=\"wp-block-inseri-core-html\" data-attributes=\"{&quot;blockId&quot;:&quot;OkuiBwmebvgcljJFfTSe6&quot;,&quot;inputKey&quot;:&quot;GSR0EhU1w0opPyZoLJP5t\/df_as_html&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;html-2&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<div class=\"wp-block-inseri-core-download\" data-attributes=\"{&quot;blockId&quot;:&quot;bpWCsyw6GL29OhzTl68c1&quot;,&quot;fileName&quot;:&quot;pandas_table&quot;,&quot;inputKey&quot;:&quot;GSR0EhU1w0opPyZoLJP5t\/df_as_html&quot;,&quot;label&quot;:&quot;Download HTML&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;download-EXw&quot;}}\">is loading &#8230;<\/div>\n\n\n\n<p>For more details please see the corresponding <a href=\"https:\/\/inseri-swiss.github.io\/inseri-core-wp\/blocks\/html\/\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-inseri-core-export alignright\" data-attributes=\"{&quot;align&quot;:&quot;right&quot;,&quot;blockId&quot;:&quot;vaxQQCzmrnvQCf4meQgfk&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;export&quot;},&quot;postId&quot;:352}\">is loading &#8230;<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-inseri-core-share alignright\" data-attributes=\"{&quot;align&quot;:&quot;right&quot;,&quot;blockId&quot;:&quot;KTETwIissQyi0jL3ZpuwV&quot;,&quot;copiedText&quot;:&quot;Copied&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;share&quot;},&quot;showIcon&quot;:true,&quot;text&quot;:&quot;Share&quot;}\">is loading &#8230;<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The HTML Code block allows us to dynamic render HTML code and displays it in the browser. To demonstrate this we start with a publicly editable Text Editor block where we allow you to edit the HTML code, and below you will see live the rendered content. But we can do more. We can use [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[38,40,41,48,50,52],"class_list":["post-352","post","type-post","status-publish","format-standard","hentry","category-inseri-core-block","tag-download","tag-export","tag-html-code","tag-python-code","tag-share","tag-text-editor"],"_links":{"self":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/comments?post=352"}],"version-history":[{"count":1,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/352\/revisions"}],"predecessor-version":[{"id":2115,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/352\/revisions\/2115"}],"wp:attachment":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/media?parent=352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/categories?post=352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/tags?post=352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}