Home → Problems →

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

• Edit

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 {}  
<pre><code>
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

https://marked2app.com/help/How-to_tips_and_tricks.html

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
---
additionalMathJaxConfig: 
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
outlineModeExtensions: 
permissionGranted: NO
printHeaderBottomLeft: 
printHeaderBottomRight: 
printHeaderFirstPage: NO
printFooterFirstPage: NO
printHeaderTopLeft: 
printHeaderTopRight: 
processHTMLFiles: YES
removeMetadataForPreview: NO
removeYAMLHeaders: NO
scrollToEdit: YES
shouldDetectCritic: YES
shouldHighlightMarkupErrors: NO
shouldLoadCritic: NO
syntaxHighlight: YES
syntaxHighlightOnlyLang: NO
useCustomMarkdownProcessor: NO
customMarkdownProcessor: 
useCustomPreprocessor: NO
customPreprocessor: 
useFirstH1AsPrintTitle: YES</code>
</pre>

1. Support Staff 1 Posted by Brett on 16 Apr, 2022 08:46 PM

   

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

   -Brett
   ________________________________

   • Edit

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

   

   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

   Regards

   Mike Erickson

   • Edit

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

   

   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.

   Thanks,
   Brett

   • Edit

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

   

   Hey Brett

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

   • CleanShot_2022-04-17_at_09.48.52.png 255 KB
   • Edit