Adding pseudocode.js to header doesn't work

[mendax1234]

Hi, I try to follow this guide to add pseudocode.js to my head in the site. What I have done is add the code below to my head/custom.html

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [['$','$'], ['\\(','\\)']],
            displayMath: [['$$','$$'], ['\\[','\\]']],
            processEscapes: true,
            processEnvironments: true,
        }
    });
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pseudocode@latest/build/pseudocode.min.css">
<script src="https://cdn.jsdelivr.net/npm/pseudocode@latest/build/pseudocode.min.js"></script>

And I don't add this code in my R markdown file

output: 
  html_document:
    self_contained: false
    includes:
      in_header: head.html

But when I try to render the code below, it doesn't work.

% This quicksort algorithm is extracted from Chapter 7, Introduction to Algorithms (3rd edition)
\begin{algorithm}
\caption{Quicksort}
\begin{algorithmic}
\PROCEDURE{Quicksort}{$A, p, r$}
    \IF{$p < r$} 
        \STATE $q = $ \CALL{Partition}{$A, p, r$}
        \STATE \CALL{Quicksort}{$A, p, q - 1$}
        \STATE \CALL{Quicksort}{$A, q + 1, r$}
    \ENDIF
\ENDPROCEDURE
\PROCEDURE{Partition}{$A, p, r$}
    \STATE $x = A[r]$
    \STATE $i = p - 1$
    \FOR{$j = p$ \TO $r - 1$}
        \IF{$A[j] < x$}
            \STATE $i = i + 1$
            \STATE exchange
            $A[i]$ with $A[j]$
        \ENDIF
        \STATE exchange $A[i]$ with $A[r]$
    \ENDFOR
\ENDPROCEDURE
\end{algorithmic}
\end{algorithm}

Can someone help me with it!

Thanks!

[rjzupkoii]

Do you know if that plug-in supports Markdown rendering other than R Markdown? The Academic Pages template uses karmadown, and there are enough differences between the various Markdown engines that the plug-ins aren't always compatible.

[mendax1234]

@rjzupkoii There is bug now and that's the rendering doesn't work on mobile site. Can I confirm with you that whether the script.html will be included in the mobile site?
Thanks!

[rjzupkoii]

@mendax1234 Excellent work! Everything in script.html is included in the mobile site - remember that the template uses responsive design so it's detecting the resolution when deciding to display in a mobile view or not. Hard to say what would cause rendering issues without actually taking a look at the code itself and checking the console (under More Tools > Developer Tools > Console in Chrome) to see if there are any messages present.

[mendax1234]

@mendax1234 Excellent work! Everything in script.html is included in the mobile site - remember that the template uses responsive design so it's detecting the resolution when deciding to display in a mobile view or not. Hard to say what would cause rendering issues without actually taking a look at the code itself and checking the console (under More Tools > Developer Tools > Console in Chrome) to see if there are any messages present.

@rjzupkoii Thanks for your advice! But seems that there is no developer tools in mobile version chrome, so it's hard for me to debug. I think you are right, may be it is because of the responsive design of this theme, not the rendering. If so, can you give me some hints on solving this problem? Since I am pretty new to the responsive design and don't know how it's implemented in this awesome project.

To reproduce the bug on mobile version, I think just need to add the code in my above reply and then add an example pseudocode in one of the posts and then use the mobile to see the post.

Thanks for any help!

[rjzupkoii]

@mendax1234 You can actually use desktop Chrome to do mobile development! If you open the Developer Tools there's a small icon that allows you to open the Device Toolbar which then allows you to emulate a mobile device.

[mendax1234]

@mendax1234 You can actually use desktop Chrome to do mobile development! If you open the Developer Tools there's a small icon that allows you to open the Device Toolbar which then allows you to emulate a mobile device.

@rjzupkoii Thanks. I see I see. But seems that based on the simulation, the pseudocode.js should work find on mobile. That's strange.