Displaying code blocks, and issue with material on the subject on your website

Mike Erickson's Avatar

Mike Erickson

16 Apr, 2022 08:19 PM

// Please enter a detailed description of the issue // Description of the issue:

I am trying to find a way to better display code blocks (multi-line and inline) but am coming up blank

The first method, using multi-line

import { getSetting } from `@helpers/NPConfiguration'

class MyClass {}  
The second method, using in-line

This is a test `variable` that I want to display

So, I figured I would google and came across this page


However, when displayed it has a bunch of broken image links

So, does NotePlan have any thing outside the generic code (monospaced black/red) styling?

// If applicable please attach a sample document that causes the issue for you.

// Configuration (do not edit)
Marked 2 1031 (Direct)
macOS Version: 12.3.1
allowPageBreakInCode: YES
bookTxtIsLeanpub: NO
summaryMdIsGitBook: NO
codeIsPoetry: NO
codeCanWrap: YES
collapsibleHeadlines: NO
convertGithubCheckboxes: YES
convertGithubEmoji: YES
convertYAMLToMMD: NO
defaultMathJaxConfig: TeX-AMS-MML_HTMLorMML
defaultPreviewStyle: 103
defaultProcessor: MultiMarkdown
enableMiniMap: NO
excludeBlockQuotesFromCounts: YES
excludeFootnotesFromCounts: YES
excludeVerbatimFromCounts: YES
excludeCaptionsFromCounts: YES
folderPreviewExtensionsArray: md, markdown, txt, mdown, html, opml
githubNewlines: YES
h1IsPageBreak: NO
h2IsPageBreak: NO
hrIsPageBreak: NO
includeMathJax: NO
includeKatex: NO
limitTextWidth: NO
mathNumberEquations: NO
mathNumberEquationsSide: 0
mathNumberEquationsAMSOnly: NO
minimalJavaScript: NO
permissionGranted: NO
printHeaderFirstPage: NO
printFooterFirstPage: NO
processHTMLFiles: YES
removeMetadataForPreview: NO
removeYAMLHeaders: NO
scrollToEdit: YES
shouldDetectCritic: YES
shouldHighlightMarkupErrors: NO
shouldLoadCritic: NO
syntaxHighlight: YES
syntaxHighlightOnlyLang: NO
useCustomMarkdownProcessor: NO
useCustomPreprocessor: NO
useFirstH1AsPrintTitle: YES</code>
  1. Support Staff 1 Posted by Brett on 16 Apr, 2022 08:46 PM

    Brett's Avatar

    Is this a question about NotePlan or Marked? I do not understand the question.


  2. 2 Posted by Mike Erickson on 16 Apr, 2022 10:15 PM

    Mike Erickson's Avatar

    This is a question about Marked. I am trying to figure out how to better style markdown files which have fenced code, either inline or multiline.

    The “NotePlan” reference was in the context of a sample codeblock that I want to format, maybe better stated

    import { foo } from ‘../utils’

    let bar = foo(3)

    Sorry for the confusion


    Mike Erickson

  3. Support Staff 3 Posted by Brett on 17 Apr, 2022 01:46 PM

    Brett's Avatar

    I still don’t understand exactly what you’re asking. You want to style the code blocks in the preview and are looking for css tips? You want to enable syntax highlighting and change the highlighting style? Not certain what you’re looking for.


  4. 4 Posted by Mike Erickson on 17 Apr, 2022 04:49 PM

    Mike Erickson's Avatar

    Hey Brett

    Sorry, this was the missing piece for me, once I selected an item all was right in the world

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac