How to add syntax highlighting to indented code blocks using github flavored markdown












1















Using github flavored markdown, there are three sytnax variants for a block of code:





  1. Fenced code blocks



    ```js
    var user = "string"
    ```



  2. Indented code blocks



        var user = "string"



  3. Html blocks example 137



    <pre><code>var user = <i>"string"</i>
    </code></pre>



Github will also apply syntax highlighting when parsing markdown files, but I can't get it to work for indented or html blocks.



How can I tell github to run syntax highlighting or even specify a language for indented code blocks or html code blocks?



Here's a gist with a working demo of github's markdown parsing












share|improve this question





























    1















    Using github flavored markdown, there are three sytnax variants for a block of code:





    1. Fenced code blocks



      ```js
      var user = "string"
      ```



    2. Indented code blocks



          var user = "string"



    3. Html blocks example 137



      <pre><code>var user = <i>"string"</i>
      </code></pre>



    Github will also apply syntax highlighting when parsing markdown files, but I can't get it to work for indented or html blocks.



    How can I tell github to run syntax highlighting or even specify a language for indented code blocks or html code blocks?



    Here's a gist with a working demo of github's markdown parsing












    share|improve this question



























      1












      1








      1








      Using github flavored markdown, there are three sytnax variants for a block of code:





      1. Fenced code blocks



        ```js
        var user = "string"
        ```



      2. Indented code blocks



            var user = "string"



      3. Html blocks example 137



        <pre><code>var user = <i>"string"</i>
        </code></pre>



      Github will also apply syntax highlighting when parsing markdown files, but I can't get it to work for indented or html blocks.



      How can I tell github to run syntax highlighting or even specify a language for indented code blocks or html code blocks?



      Here's a gist with a working demo of github's markdown parsing












      share|improve this question
















      Using github flavored markdown, there are three sytnax variants for a block of code:





      1. Fenced code blocks



        ```js
        var user = "string"
        ```



      2. Indented code blocks



            var user = "string"



      3. Html blocks example 137



        <pre><code>var user = <i>"string"</i>
        </code></pre>



      Github will also apply syntax highlighting when parsing markdown files, but I can't get it to work for indented or html blocks.



      How can I tell github to run syntax highlighting or even specify a language for indented code blocks or html code blocks?



      Here's a gist with a working demo of github's markdown parsing









      github markdown






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 30 '18 at 23:23







      KyleMit

















      asked Dec 30 '18 at 22:49









      KyleMitKyleMit

      1,89641732




      1,89641732






















          1 Answer
          1






          active

          oldest

          votes


















          1














          In GitHub Flavored Markdown Spec it says:




          The line with the opening code fence may optionally contain some text
          following the code fence; this is trimmed of leading and trailing
          whitespace and called the info string. (...) The content of a code
          fence is treated as literal text, not parsed as inlines. The first
          word of the info string is typically used to specify the language of
          the code sample, and rendered in the class attribute of the code tag.




          And earlier it also says:




          An indented code block has no info string.




          So I think it's not possible to embed language information in indented
          code blocks. To put language information inside HTML block I found
          this to be working ok:



          <pre lang="javascript"><code>var user = "string"
          </code></pre>


          Here is a short test on Github:
          https://gist.github.com/ardrabczyk/179e05e0a2134389de3d270c2a10ee26






          share|improve this answer
























          • Oh, sweet!! I'm a sucker for throwing samples inside <pre><code> blocks and escaping myself so I can throw in some extra <b> or <i> tags to empahsize sections within the code. This'll help bunches. Thanks!

            – KyleMit
            Dec 31 '18 at 1:09











          • Ahh, definitely answers the question, but didn't happen to solve my roundabout problem. Now that syntax highlighting is being applied to html blocks, it's sanitizing the tags inside them

            – KyleMit
            Dec 31 '18 at 1:16











          Your Answer








          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "3"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f1389087%2fhow-to-add-syntax-highlighting-to-indented-code-blocks-using-github-flavored-mar%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          In GitHub Flavored Markdown Spec it says:




          The line with the opening code fence may optionally contain some text
          following the code fence; this is trimmed of leading and trailing
          whitespace and called the info string. (...) The content of a code
          fence is treated as literal text, not parsed as inlines. The first
          word of the info string is typically used to specify the language of
          the code sample, and rendered in the class attribute of the code tag.




          And earlier it also says:




          An indented code block has no info string.




          So I think it's not possible to embed language information in indented
          code blocks. To put language information inside HTML block I found
          this to be working ok:



          <pre lang="javascript"><code>var user = "string"
          </code></pre>


          Here is a short test on Github:
          https://gist.github.com/ardrabczyk/179e05e0a2134389de3d270c2a10ee26






          share|improve this answer
























          • Oh, sweet!! I'm a sucker for throwing samples inside <pre><code> blocks and escaping myself so I can throw in some extra <b> or <i> tags to empahsize sections within the code. This'll help bunches. Thanks!

            – KyleMit
            Dec 31 '18 at 1:09











          • Ahh, definitely answers the question, but didn't happen to solve my roundabout problem. Now that syntax highlighting is being applied to html blocks, it's sanitizing the tags inside them

            – KyleMit
            Dec 31 '18 at 1:16
















          1














          In GitHub Flavored Markdown Spec it says:




          The line with the opening code fence may optionally contain some text
          following the code fence; this is trimmed of leading and trailing
          whitespace and called the info string. (...) The content of a code
          fence is treated as literal text, not parsed as inlines. The first
          word of the info string is typically used to specify the language of
          the code sample, and rendered in the class attribute of the code tag.




          And earlier it also says:




          An indented code block has no info string.




          So I think it's not possible to embed language information in indented
          code blocks. To put language information inside HTML block I found
          this to be working ok:



          <pre lang="javascript"><code>var user = "string"
          </code></pre>


          Here is a short test on Github:
          https://gist.github.com/ardrabczyk/179e05e0a2134389de3d270c2a10ee26






          share|improve this answer
























          • Oh, sweet!! I'm a sucker for throwing samples inside <pre><code> blocks and escaping myself so I can throw in some extra <b> or <i> tags to empahsize sections within the code. This'll help bunches. Thanks!

            – KyleMit
            Dec 31 '18 at 1:09











          • Ahh, definitely answers the question, but didn't happen to solve my roundabout problem. Now that syntax highlighting is being applied to html blocks, it's sanitizing the tags inside them

            – KyleMit
            Dec 31 '18 at 1:16














          1












          1








          1







          In GitHub Flavored Markdown Spec it says:




          The line with the opening code fence may optionally contain some text
          following the code fence; this is trimmed of leading and trailing
          whitespace and called the info string. (...) The content of a code
          fence is treated as literal text, not parsed as inlines. The first
          word of the info string is typically used to specify the language of
          the code sample, and rendered in the class attribute of the code tag.




          And earlier it also says:




          An indented code block has no info string.




          So I think it's not possible to embed language information in indented
          code blocks. To put language information inside HTML block I found
          this to be working ok:



          <pre lang="javascript"><code>var user = "string"
          </code></pre>


          Here is a short test on Github:
          https://gist.github.com/ardrabczyk/179e05e0a2134389de3d270c2a10ee26






          share|improve this answer













          In GitHub Flavored Markdown Spec it says:




          The line with the opening code fence may optionally contain some text
          following the code fence; this is trimmed of leading and trailing
          whitespace and called the info string. (...) The content of a code
          fence is treated as literal text, not parsed as inlines. The first
          word of the info string is typically used to specify the language of
          the code sample, and rendered in the class attribute of the code tag.




          And earlier it also says:




          An indented code block has no info string.




          So I think it's not possible to embed language information in indented
          code blocks. To put language information inside HTML block I found
          this to be working ok:



          <pre lang="javascript"><code>var user = "string"
          </code></pre>


          Here is a short test on Github:
          https://gist.github.com/ardrabczyk/179e05e0a2134389de3d270c2a10ee26







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Dec 30 '18 at 23:24









          Arkadiusz DrabczykArkadiusz Drabczyk

          1,636711




          1,636711













          • Oh, sweet!! I'm a sucker for throwing samples inside <pre><code> blocks and escaping myself so I can throw in some extra <b> or <i> tags to empahsize sections within the code. This'll help bunches. Thanks!

            – KyleMit
            Dec 31 '18 at 1:09











          • Ahh, definitely answers the question, but didn't happen to solve my roundabout problem. Now that syntax highlighting is being applied to html blocks, it's sanitizing the tags inside them

            – KyleMit
            Dec 31 '18 at 1:16



















          • Oh, sweet!! I'm a sucker for throwing samples inside <pre><code> blocks and escaping myself so I can throw in some extra <b> or <i> tags to empahsize sections within the code. This'll help bunches. Thanks!

            – KyleMit
            Dec 31 '18 at 1:09











          • Ahh, definitely answers the question, but didn't happen to solve my roundabout problem. Now that syntax highlighting is being applied to html blocks, it's sanitizing the tags inside them

            – KyleMit
            Dec 31 '18 at 1:16

















          Oh, sweet!! I'm a sucker for throwing samples inside <pre><code> blocks and escaping myself so I can throw in some extra <b> or <i> tags to empahsize sections within the code. This'll help bunches. Thanks!

          – KyleMit
          Dec 31 '18 at 1:09





          Oh, sweet!! I'm a sucker for throwing samples inside <pre><code> blocks and escaping myself so I can throw in some extra <b> or <i> tags to empahsize sections within the code. This'll help bunches. Thanks!

          – KyleMit
          Dec 31 '18 at 1:09













          Ahh, definitely answers the question, but didn't happen to solve my roundabout problem. Now that syntax highlighting is being applied to html blocks, it's sanitizing the tags inside them

          – KyleMit
          Dec 31 '18 at 1:16





          Ahh, definitely answers the question, but didn't happen to solve my roundabout problem. Now that syntax highlighting is being applied to html blocks, it's sanitizing the tags inside them

          – KyleMit
          Dec 31 '18 at 1:16


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Super User!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f1389087%2fhow-to-add-syntax-highlighting-to-indented-code-blocks-using-github-flavored-mar%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Сан-Квентин

          Алькесар

          Josef Freinademetz