Rendering Issues When Using '$'

HarunCelikOtto commented 4 weeks ago

Hello,

Thank you for this amazing filter!

I am having an issue where the pseudocode block will not render if I use any '$' characters.

I am using the filter in a quarto book project, and I don't have any specific settings with regards to a Latex configuration. This is using Quarto 1.5.45.

The filter is added into the book project using the following form.

project:
  type: book
  output-dir: docs

filters:
  - pseudocode

Inside of my qmd file, I have the pseudocode block written as such. This version renders without any issues.


```pseudocode
\begin{algorithm}
\caption{Abstracted Data Extraction with Adaptive Knowledge Refinement}
\begin{algorithmic}

\Require InputData: Source Material; KnowledgeBase: Contextual Framework; ReferenceData: Validation Set
\State DetectedAreas := IdentifyRegions(InputData)
\While{true}
  \State TargetArea := SelectCandidate(DetectedAreas)
  \State ProcessedArea := EnhanceCandidate(TargetArea)
  \State ExtractedInformation, Certainty := ExtractContent(ProcessedArea)
\If{Certainty meets Criteria}
  \State KnowledgeBase := AdaptKnowledgeBase(ReferenceData)
  \State Reinitialize Process for All Areas
\Else
  \State ClosestMatch, MatchScore := CompareWithKnowledgeBase(ExtractedInformation, KnowledgeBase)
\EndIf
  \State Terminate if all Areas have been Processed
\EndWhile

\end{algorithmic}
\end{algorithm}


If I enclose anything in `$` like in the following example with the `\Require` section, then no pseudocode will render.

````qmd
# Enclosing a Variable in the \Require section in $.
```pseudocode
\Require $InputData$: Source Material ...

Any idea why this may be happening?

leovan commented 3 weeks ago

It's not the problem with $. If you want to ignore the caption, remove the \caption line only:

\begin{algorithm}
\begin{algorithmic}

\Require $InputData$: Source Material ...

\end{algorithmic}
\end{algorithm}

But it will have two head lines in pdf which cannot be fixed now.

HTML:

PDF:

HarunCelikOtto commented 3 weeks ago

Hey leovan,

Thanks for your reply! I've only just been able to get back to this.

So, I'm not exactly sure I understand how the caption is related, but removing the \caption does not do anything new in terms of difficulty with rendering the pseudocode.

I was curious if this was somehow related to my project settings and created a completely new quarto book project using quarto create in the cli. Then I added your extension using quarto add leovan/quarto-pseudocode and then copied the example you have on the readme file exactly as it is into the intro.qmd file.

So the clean project directory looks like this with the extension added.

pseudo-test
├── .quarto
│   ├── cites
│   │   └── index.json
│   ├── idx
│   │   ├── index.qmd.json
│   │   ├── intro.qmd.json
│   │   ├── references.qmd.json
│   │   └── summary.qmd.json
│   ├── preview
│   │   └── lock
│   └── xref
│       ├── 73a85e9b
│       ├── 9dc2539e
│       ├── INDEX
│       ├── d9a70436
│       └── fb19738a
├── _extensions
│   └── leovan
│       └── pseudocode
│           ├── _extension.yml
│           ├── pseudocode.lua
│           ├── pseudocode.min.css
│           └── pseudocode.min.js
├── _quarto.yml
├── cover.png
├── index.qmd
├── intro.qmd
├── references.bib
├── references.qmd
└── summary.qmd

Inside the intro.qmd file, I have the following content.

# Introduction

This is a book created from markdown and executable code.

See @knuth84 for additional discussion of literate programming.

```pseudocode
#| html-indent-size: "1.2em"
#| html-comment-delimiter: "//"
#| html-line-number: true
#| html-line-number-punc: ":"
#| html-no-end: false
#| pdf-placement: "htb!"
#| pdf-line-number: true

\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}


The rendered HTML output is the following.

![pseudo-test](https://github.com/user-attachments/assets/9315c703-5b0f-4125-a6da-261b3fa73abf)

As you can see, I can't render the pseudocode in any way. This changes when I remove all of the instances of `$` from the pseudocode block.

Now the same content in 'intro.qmd' without the `$`.

````qmd
# Introduction

This is a book created from markdown and executable code.

See @knuth84 for additional discussion of literate programming.

# Introduction

This is a book created from markdown and executable code.

See @knuth84 for additional discussion of literate programming.

```pseudocode
#| html-indent-size: "1.2em"
#| html-comment-delimiter: "//"
#| html-line-number: true
#| html-line-number-punc: ":"
#| html-no-end: false
#| pdf-placement: "htb!"
#| pdf-line-number: true

\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}



The result appears as such.

![pseudo-test-no-dollar](https://github.com/user-attachments/assets/75249eb7-9ac2-43f5-836c-c241ae445515)

Hopefully this clarifies the issue better :smile:

leovan commented 3 weeks ago

The first screenshot is the page of index.qmd rathter than intro.qmd. Open the developer tool of browser and change to the Console tab, refresh the web page (page with pseudocode and $), there may some error log in it. Paste it here and let's see the problem.

HarunCelikOtto commented 2 weeks ago

Oops, I must have sent the wrong screenshot on that first one. It still behaves as I describe though.

Here is the output from the console.

Uncaught EvalError: No math backend found. Please setup KaTeX or MathJax.
    renderToHTML http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTree http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTree http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTreeForAllChildren http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTree http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTree http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTreeForAllChildren http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTree http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTreeForAllChildren http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTree http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTree http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTreeForAllChildren http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    _buildTree http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    toMarkup http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    toDOM http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    renderElement http://localhost:4810/site_libs/quarto-contrib/pseudocode-2.4.1/pseudocode.min.js:1
    <anonymous> http://localhost:4810/intro.html:645
    <anonymous> http://localhost:4810/intro.html:636
    <anonymous> http://localhost:4810/intro.html:647
pseudocode.min.js:1:14454
GET
http://localhost:4810/favicon.ico
[HTTP/1.1 404 Not Found 0ms]

Socket connection open. Listening for events. quarto-preview.js:2:1030

Looks like there isn't a math backend. I thought that this would come with Quarto, an unfair assumption on my part I guess.

leovan commented 2 weeks ago

As the error message told, No math backend found. Please setup KaTeX or MathJax.. MathJax is not embeded into this filter, you need import it by yourself.

format:
  html:
    include-in-header:
      text: |
        <script>
        MathJax = {
          loader: {
            load: ['[tex]/boldsymbol']
          },
          tex: {
            tags: "all",
            inlineMath: [['$','$'], ['\\(','\\)']],
            displayMath: [['$$','$$'], ['\\[','\\]']],
            processEscapes: true,
            processEnvironments: true,
            packages: {
              '[+]': ['boldsymbol']
            }
          }
        };
        </script>
        <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>

leovan / quarto-pseudocode

Rendering Issues When Using '$' #4