Emoji can be enabled in a Hugo project in a number of ways.
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
Lorem est tota propiore conpellat pectoribus de pectora summo.
/* CSS Popular Post AMP IDN Blogger - Hafid */
/* Popular Post */
.PopularPosts ul{font-family:'Fira Sans', sans-serif;list-style:none;margin:0 auto;padding:0;overflow:hidden;width:100%}
.PopularPosts li,.PopularPosts li amp-img,.PopularPosts li a,.PopularPosts li a amp-img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul li {margin:0 auto 10px;position:relative;overflow:hidden;line-height:1em;list-style:none;padding:10px;background: #F1F3F4;border-radius: 25px;}
.PopularPosts ul li a:hover {color:#38a3d1;}
.PopularPosts li a{color:#333;font-weight:500;font-size:16.40px;list-style:none;line-height:1.2em;display:block;overflow:hidden}
.PopularPosts ul li amp-img {width:90px;height:90px;float:left;display:inline-block}
.PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;border-radius:99em;overflow:hidden;float:left;margin:0px 20px 0 0;position:relative}
.PopularPosts .item-snippet{display:block;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:12px;color:#aaa;overflow:hidden;margin:4px 0 0;display:none}
.PopularPosts .item-title {padding:0;margin:0;text-align:left}
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1' visible='true'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'> <data:post.title/> </a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'> <a expr:href='data:post.href'> <data:post.title/> </a> </div> <div class='item-snippet'> <data:post.snippet/> </div> </b:if> <b:else/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 700) : data:post.thumbnail' var='image'> <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='170' layout='responsive' width='280' /> </b:with> </a> </div> <b:else/> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggF3xH6csIJr1gzN8VH7xZ3wRZWAdUkNbeFd3M2A4yfsKUEzbRJcXY6zqfktQFmcd8oP70vvNQ8g23UzyZtP3ASWl5anmlYOhdx8qhVFpCssxMKmNXwJUWEYOIrFPvqS5g-mCe-tRp4SUl/s100/no-thumbnail.png' width='100' /> </a> </div> </b:if> <div class='item-title'> <a expr:href='data:post.href'> <data:post.title/> </a> </div> <b:if cond='data:showSnippets'> <div class='item-snippet'> <data:post.snippet/> </div> </b:if> </div> <div class='clear' /> </b:if> </li> </b:loop> </ul> </div> </b:includable> </b:widget>