html - Initial letter and word in jekyll posts and pages -

i style initial letter , initial word of posts , pages in jekyll blog. this:

i can achieve result following style , span tags:

:not(.post-excerpt) > .initial-word {    color: #166079;    font-variant: small-caps;    font-weight: bold;  }    :not(.post-excerpt) > .initial-word .initial-letter {    float: left;    font-size: 3.15em;    line-height: 0.5;    margin: 0.225em 0.159em 0 0;    color: #166079;    font-weight: normal;    text-transform: uppercase;  }

<p>    <span class="initial-word"><span class="initial-letter">l</span>orem</span> ipsum dolor sit amet  </p>

given jekyll post starting introduction text:

lorem ipsum dolor sit amet  # main title of post  lorem ipsum dolor sit amet 

the content of post, accessible in layout via liquid code {{ content }} like:

<p>lorem ipsum dolor sit amet</p>  <h1>main title of post</h1>  <p>lorem ipsum dolor sit amet</p> 

i modify content of post add span tags following requirements:

• the initial tags must added introduction; don't want them if content doesn't start p tag, , want them on first paragraph.

• the <span class="initial-word"> tag may used directly in post encapsulate more 1 word, this:

  <span class="initial-word">lorem ipsum</span> dolor sit amet  # main title of post  lorem ipsum dolor sit amet` 

in such case <span class="initial-letter"> should added.

i ended complicated code posts:

{% assign content_start=content | slice: 0, 3 %} {% assign tokens=content | split: '<span class="initial-word">' %} {% assign count=tokens | size %} {% if content_start == "<p>" or count > 1 %}   {% if count > 1 %}     {% assign tokens=tokens[1] | split: "</span>" %}     {% assign initial_word=tokens[0] %}   {% else %}     {% assign initial_word=content | remove_first: "<p>" | truncatewords: 1, "" %}   {% endif %}   {% assign initial_letter=initial_word | slice: 0 %}   {% assign span_letter=initial_letter | prepend: '<span class="initial-letter">' | append: '</span>' %}   {% assign span_word=initial_word | replace_first: initial_letter, "" | prepend: span_letter %}   {% unless count > 1 %}     {% assign span_word=span_word | prepend: '<span class="initial-word">' | append: '</span>' %}   {% endunless %}   {% assign content=content | replace_first: initial_word, span_word %} {% endif %} 

and similar, different version pages. have hint in simpler way? magic filter missing?

the complete code of layout can seen here.

not full answer , might have misunderstood something, first letter, suggest using :first-letter selector instead of wrapping in span.

and selecting first paragraph in , p:first-of-type help?