CODEWITHSUNDEEP
hugo
Blake Shurtz
Blake Shurtz

Reputation: 331

How do I embed code through my text editor?

I'm running Hugo and editing my pages using Notepad++. I'd like to embed some code similar to the page here.

My Hugo version is

Hugo Static Site Generator v0.55.6-A5D4C82D windows/amd64 BuildDate: 2019-05-18T07:57:00Z

My config.toml file is below. As you can see, I've added the pygments options to the top of the page:

pygmentsCodefences = true
pygmentsStyle = "autumn"


baseurl = "https://blakeshurtz.netlify.com/"
title = "Blake Shurtz"
theme = "hugo-creative-portfolio-theme"
languageCode = "en-us"
# Enable comments by entering your Disqus shortname
disqusShortname = ""
# Enable Google Analytics by entering your tracking code
googleAnalytics = ""



[params]
  # Style options: default (pink), blue, green, pink, red, sea, violet
  # Use custom.css for your custom styling
  style = "default"
  description = "Describe your website"
  copyright = "©2019 Blake Shurtz"
  sidebarAbout = [
    "I am a research statistician who enjoys building models and apps.",
    "Originally from the Bay Area, currently based in central CA."
  ]
  # Contact page
     # Since this template is static, the contact form uses www.formspree.io as a
     # proxy. The form makes a POST request to their servers to send the actual
     # email. Visitors can send up to a 1000 emails each month for free.
     #
     # What you need to do for the setup?
     #
     # - set your email address under 'email' below
     # - upload the generated site to your server
     # - send a dummy email yourself to confirm your account
     # - click the confirm link in the email from www.formspree.io
     # - you're done. Happy mailing!
  email = "[email protected]"

    # Optional Matomo analytics (formerly piwik)
      # [params.analytics.matomo]
      #  URL = "https://stats.example.com"
      #  ID = "42"
      #  # Track all subdomains with "*.example.com" (Optional)
      #  domain = "www.example.com"
      #  # Optional integrity check hash
      #  hash = ""

  # Nav links in the side bar
  [[params.navlinks]]
  name = "Home"
  url = "portfolio/"
  home = true

  [[params.navlinks]]
  name = "About"
  url = "about/"

  [[params.navlinks]]
  name = "Get in touch"
  url = "contact/"

  [params.social]
    stackoverflow = "https://stats.stackexchange.com/users/206673/blake-shurtz"
  twitter       = "https://twitter.com/blakeobeans"
  email         = "[email protected]"
  linkedin      = "https://www.linkedin.com/in/blakeshurtz/"

  github        = "https://github.com/blakeobeans"

Can someone give me an example of what I need to write in my text editor in order to include the code?

Thanks!

Upvotes: 0

Views: 330

Answers (2)

zwbetz
zwbetz

Reputation: 1100

As Ambrose Leung's answer mentions, you can include code blocks in markdown by wrapping them in 3 backticks:

```language
some code here
```

To get syntax highlighting, you can use Chroma, which is built into Hugo. Just add these lines to the top of your config.toml file (don't let the names confuse you, they say pygments but are for chroma):

pygmentsCodefences = true
pygmentsStyle = "pygments"

You can set the pygmentsStyle value to any of the styles from the style gallery.

Upvotes: 1

Ambrose Leung
Ambrose Leung

Reputation: 4225

I'm assuming you mean using markdown syntax to format text as code.

Surround your code with three backticks at the beginning and at the end.

```python (or whatever language)
code here
```

Upvotes: 2

Related Questions